system-phone 3.1.1 → 3.1.2

package/src/components/screen/ContentPage.vue

@@ -1,611 +1,611 @@
-<template>
-<div  style="height: 100%;background: url('src/assets/images/back.png')">
-  <div style="background-color: darkblue;height: 100%" >
-    <div class="total-number">
-      <total-user-number :total-data="totalData[0]" :user-total-icon="userTotalIcon1"></total-user-number>
-    </div>
-    <div class="gas-nature-number" id="gasNatureNumberLeft" style="margin-top: 15px"></div>
-    <div style="height: 5%">
-      <module-title :module-tile-icon="juMingIcon"
-                    :title="juMingTitle"
-                    :font="juMingFont">
-      </module-title>
-    </div>
-    <div id="juMing"></div>
-  </div>
-  <div style="background-color: darkblue;height: 100%">
-    <div class="total-number">
-      <total-user-number :total-data="totalData[1]" :user-total-icon="userTotalIcon2"></total-user-number>
-    </div>
-    <div class="gas-nature-number" id="gasNatureNumberRight"></div>
-    <div id="nJuMing"></div>
-  </div>
-<!--  <div class="gas-nature-number" id="gasNatureNumberRight"></div>-->
-</div>
-</template>
-<script>
-import * as echarts from 'echarts';
-export  default {
-  title:"content-page",
-  data(){
-    return {
-      juMingIcon:require('src/assets/images/居民增长分析.png'),
-      juMingTitle:'居民用户增长分析',
-      juMingFont:6,
-
-      userTotalIcon1:require('../../assets/images/居民用户.png'),
-      userTotalIcon2:require('../../assets/images/非居民用户.png'),
-      residengtMonth:['1月','2月','3月','4月','5月','6月'],
-      nResidentMonth:['1月','2月','3月','4月','5月','6月'],
-
-      totalData:[{title:'居民用户',number:65412},{title:'非居民用户',number:5412}],
-      juMingIncrementData:[8000,8530,9560,10860,13000,13265],
-      nJuMingIncrementData:[456,789,100,1023,1500,1689],
-      juMjingNatureData:[{name: "生活用户", value: 487696}, {name: "壁挂锅炉", value: 99806}],
-      nJumingNatureData:[
-        { value: 335, name: "商业" },
-        { value: 310, name: "公福" },
-        { value: 274, name: "小区自备锅炉" },
-        { value: 235, name: "福利院校" },
-        { value: 235, name: "集中供热" },
-      ],
-    }
-  },
-  ready(){
-    this.getJuMingPie()
-    this.getJuMingLine()
-    this.getNJuMingPie()
-    this.getNJuMingLine()
-  },
-  methods:{
-    getNJuMingLine(){
-      let myChart = echarts.init(document.getElementById('nJuMing'));
-      let option = {
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            lineStyle: {
-              color: "#dddc6b"
-            }
-          }
-        },
-        grid: {
-          left: "10",
-          top: "30",
-          right: "10",
-          bottom: "10",
-          containLabel: true
-        },
-
-        xAxis: [
-          {
-            type: "category",
-            boundaryGap: false,
-            axisLabel: {
-              textStyle: {
-                color: "rgba(255,255,255,.6)",
-                fontSize: 12
-              }
-            },
-            axisLine: {
-              lineStyle: {
-                color: "rgba(255,255,255,.2)"
-              }
-            },
-
-            data: this.nResidentMonth
-          },
-          {
-            axisPointer: { show: false },
-            axisLine: { show: false },
-            position: "bottom",
-            offset: 20
-          }
-        ],
-
-        yAxis: [
-          {
-            type: "value",
-            axisTick: { show: false },
-            axisLine: {
-              lineStyle: {
-                color: "rgba(255,255,255,.1)"
-              }
-            },
-            axisLabel: {
-              textStyle: {
-                color: "rgba(255,255,255,.6)",
-                fontSize: 12
-              }
-            },
-
-            splitLine: {
-              lineStyle: {
-                color: "rgba(255,255,255,.1)"
-              }
-            }
-          }
-        ],
-        series: [
-          {
-            name: "非居民用户",
-            type: "line",
-            smooth: true,
-            symbol: "circle",
-            symbolSize: 5,
-            showSymbol: false,
-            lineStyle: {
-              normal: {
-                color: "#00d887",
-                width: 2
-              }
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: "rgba(0, 216, 135, 0.4)"
-                    },
-                    {
-                      offset: 0.8,
-                      color: "rgba(0, 216, 135, 0.1)"
-                    }
-                  ],
-                  false
-                ),
-                shadowColor: "rgba(0, 0, 0, 0.1)"
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: "#00d887",
-                borderColor: "rgba(221, 220, 107, .1)",
-                borderWidth: 12
-              }
-            },
-            data: this.nJuMingIncrementData
-          }
-        ]
-      };
-
-      // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option);
-      window.addEventListener("resize", function() {
-        myChart.resize();
-      });
-    },
-    getJuMingLine(){
-      console.log(document.getElementById('juMing'))
-      let myChart = echarts.init(document.getElementById('juMing'));
-      let option = {
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            lineStyle: {
-              color: "#dddc6b"
-            }
-          }
-        },
-        grid: {
-          left: "10",
-          top: "30",
-          right: "10",
-          bottom: "10",
-          containLabel: true
-        },
-
-        xAxis: [
-          {
-            type: "category",
-            boundaryGap: false,
-            axisLabel: {
-              textStyle: {
-                color: "rgba(255,255,255,.6)",
-                fontSize: 12
-              }
-            },
-            axisLine: {
-              lineStyle: {
-                color: "rgba(255,255,255,.2)"
-              }
-            },
-
-            data: JSON.parse(JSON.stringify(this.residengtMonth))
-          },
-          {
-            axisPointer: { show: false },
-            axisLine: { show: false },
-            position: "bottom",
-            offset: 20
-          }
-        ],
-
-        yAxis: [
-          {
-            type: "value",
-            axisTick: { show: false },
-            axisLine: {
-              lineStyle: {
-                color: "rgba(255,255,255,.1)"
-              }
-            },
-            axisLabel: {
-              textStyle: {
-                color: "rgba(255,255,255,.6)",
-                fontSize: 12
-              }
-            },
-
-            splitLine: {
-              lineStyle: {
-                color: "rgba(255,255,255,.1)"
-              }
-            }
-          }
-        ],
-        series: [
-          {
-            name: "居民用户",
-            type: "line",
-            smooth: true,
-            symbol: "circle",
-            symbolSize: 5,
-            showSymbol: false,
-            lineStyle: {
-              normal: {
-                color: "#0184d5",
-                width: 2
-              }
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: "rgba(1, 132, 213, 0.4)"
-                    },
-                    {
-                      offset: 0.8,
-                      color: "rgba(1, 132, 213, 0.1)"
-                    }
-                  ],
-                  false
-                ),
-                shadowColor: "rgba(0, 0, 0, 0.1)"
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: "#0184d5",
-                borderColor: "rgba(221, 220, 107, .1)",
-                borderWidth: 12
-              }
-            },
-            data:this.juMingIncrementData
-          }
-        ]
-      };
-
-      // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option);
-      window.addEventListener("resize", function() {
-        myChart.resize();
-      });
-    },
-    getNJuMingPie(){
-      // let data = JSON.parse(JSON.stringify(this.nJumingNatureData))
-      let arr = [{normal:{color:'#2A70EF'}},
-        {normal:{color:'#288ED5'}},
-        {normal:{color:'#48ABC8'}},
-        {normal:{color:'#A0E66C'}},
-        {normal:{color:'#F6CC5F'}},
-        {normal:{color:'#EE7A2F'}}]
-      let data = this.nJumingNatureData
-      data.forEach((item,index) => {
-        item.itemStyle = arr[index]
-      })
-      console.log(data)
-      let colorList = ['#2A70EF','#288ED5','#48ABC8','#A0E66C','#F6CC5F','#EE7A2F','#EE7A2F']
-      let myChart = echarts.init(document.getElementById('gasNatureNumberRight'));
-      let option = {
-        legend: {
-          // selectedMode: false, // 取消图例上的点击事件
-          type: "plain",
-          icon: "circle",
-          orient: "vertical",
-          left: "40%",
-          top: "23%",
-          align: "left",
-          itemGap: 15,
-          itemWidth: 10, // 设置宽度
-          itemHeight: 10, // 设置高度
-          symbolKeepAspect: false,
-          textStyle: {
-            color: "#fff",
-            rich: {
-              name: {
-                verticalAlign: "right",
-                align: "left",
-                width: 80,
-                fontSize: 12,
-              },
-              value: {
-                align: "left",
-                width: 60,
-                fontSize: 12,
-              },
-              count: {
-                align: "left",
-                width: 30,
-                fontSize: 12,
-              }
-            },
-          },
-          data: data.map((item) => item.name),
-          formatter: function (name) {
-            let className = "upRate";
-            let rateIcon = "▲";
-            if (data && data.length) {
-              let sum = 0
-              data.forEach(item => {
-                sum += item.value
-              });
-              for (var i = 0; i < data.length; i++) {
-                if (name === data[i].name) {
-
-                  return (
-                    "{name| " +
-                    name +
-                    "} " +
-                    "{value| " +
-                    data[i].value +
-                    "} " +
-                    "{count| " +
-                    ((data[i].value/sum)*100).toFixed(2) +
-                    "%} "
-                  );
-                }
-              }
-            }
-          },
-        },
-        visualMap: {
-          show: false,
-          min: 80,
-          max: 600,
-          inRange: {
-            colorLightness: [0, 1],
-          },
-        },
-        color: [
-          "#F6CC5F",
-          "rgb(0, 228, 196)"
-        ],
-        series: [
-          {
-            name: "非居民用户数",
-            type: "pie",
-            radius: "55%",
-            center: ["20%", "50%"],
-            data: data,
-            label: {
-              normal: {
-                show: false,
-                position: "center",
-                formatter: "{text|{c}}\n{b}",
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: function(params) {
-                  return colorList[params.dataIndex]
-                }
-              }
-            },
-            // roseType: "angle",
-          },
-        ],
-      };
-      myChart.setOption(option);
-      window.addEventListener("resize", function() {
-        myChart.resize();
-      });
-    },
-    getJuMingPie(){
-      // console.log('5555',this.$echarts)
-      // console.log(document.getElementById('gasNatureNumberLeft'))
-      let myChart = echarts.init(document.getElementById('gasNatureNumberLeft'));
-      let data = JSON.parse(JSON.stringify(this.juMjingNatureData))
-      let xdata = [];
-      data.forEach(item => {
-        xdata.push(item.name)
-      })
-      // // data = [{name: "生活用户", value: 487696}, {name: "壁挂锅炉", value: 99806}]
-      let option = {
-        title: {
-          // text: "{header1| 名称与占比}" + "{header2| 数量}" + "{header3| 比例}",
-          textAlign: "left",
-          left: "49%",
-          top: "30%",
-          textStyle: {
-            color: "#ccc",
-            rich: {
-              header1: {
-                width: 200,
-                fontSize: 15,
-              },
-              header2: {
-                width: 120,
-                fontSize: 15,
-              },
-              header3: {
-                fontSize: 15,
-              },
-            },
-          },
-        },
-        // tooltip: {
-        //   trigger: "item",
-        //   formatter: "{a} <br/>{b} : {c} ({d}%)",
-        // },
-        legend: {
-          // selectedMode: false, // 取消图例上的点击事件
-          orient: "vartical",
-          x: "left",
-          top: "60%",
-          left: "center",
-          bottom: "0%",
-          data: xdata,
-          itemWidth: 10,
-          itemHeight: 10,
-          itemGap: 20,
-          textStyle: {
-            color: "#fff",
-            rich: {
-              name: {
-                verticalAlign: "right",
-                align: "left",
-                width: 80,
-                fontSize: 14,
-              },
-              value: {
-                align: "left",
-                width: 70,
-                fontSize: 14,
-              },
-              count: {
-                align: "left",
-                width: 50,
-                fontSize: 14,
-              }
-            },
-          },
-          formatter: function (name) {
-            let className = "upRate";
-            let rateIcon = "▲";
-            if (data && data.length) {
-              let sum = 0
-              data.forEach(item => {
-                sum += item.value
-              });
-              for (var i = 0; i < data.length; i++) {
-                if (name === data[i].name) {
-                  return (
-                    "{name| " +
-                    name +
-                    "}" +
-                    "{value| " +
-                    data[i].value +
-                    "}" +
-                    "{count| " +
-                    ((data[i].value/sum)*100).toFixed(2) +
-                    "%} "
-                  );
-                }
-              }
-            }
-          },
-        },
-        graphic:{
-          type:'image',
-          left:'center',
-          top:'25%',
-          style:{
-            image:require('../../assets/images/居民用户.png'),
-            width:40,
-            height:35,
-
-          }
-        },
-        color: [
-          "rgb(0, 228, 196)",
-          "#F6CC5F"
-        ],
-        series: [
-          {
-            name: "居民用户",
-            type: "pie",
-            clockWise: true,
-            radius: ["40%", "55%"],
-            center: ["50%", "30%"],
-            data: data,
-            label: {
-              normal: {
-                show: false,
-              },
-              emphasis: {
-                show: false,
-                textStyle: {
-                  fontSize: "12",
-                },
-              },
-            },
-          },
-          {
-            name: "",
-            type: "pie",
-            clockWise: true,
-            hoverAnimation: false,
-            radius: [39, "30%"],
-            center: ["25%", "50%"]
-          },
-        ],
-      };
-      myChart.setOption(option);
-      window.addEventListener("resize", function() {
-        myChart.resize({
-          width:100
-        });
-      });
-    },
-  }
-}
-</script>
-<style lang="less">
-#juMing{
-  width: 100%;
-  height: 50%;
-div{
-  height: 0%;
-}
-}
-#nJuMing{
-  width: 100%;
-  height: 50%;
-  div{
-    height: 0%;
-  }
-}
-</style>
-<style lang="less" scoped>
-#nJuMing{
-  width: 100%;
-  height: 50%;
-}
-#juMing{
-  width: 100%;
-  height: 50%;
-  div{
-    height: 10%;
-  }
-}
-.total-number{
-  width: 100%;
-  height: 6%;
-}
-.gas-nature-number{
-  width: 100%;
-  height: 38%;
-}
-</style>
+<template>
+<div  style="height: 100%;background: url('src/assets/images/back.png')">
+  <div style="background-color: darkblue;height: 100%" >
+    <div class="total-number">
+      <total-user-number :total-data="totalData[0]" :user-total-icon="userTotalIcon1"></total-user-number>
+    </div>
+    <div class="gas-nature-number" id="gasNatureNumberLeft" style="margin-top: 15px"></div>
+    <div style="height: 5%">
+      <module-title :module-tile-icon="juMingIcon"
+                    :title="juMingTitle"
+                    :font="juMingFont">
+      </module-title>
+    </div>
+    <div id="juMing"></div>
+  </div>
+  <div style="background-color: darkblue;height: 100%">
+    <div class="total-number">
+      <total-user-number :total-data="totalData[1]" :user-total-icon="userTotalIcon2"></total-user-number>
+    </div>
+    <div class="gas-nature-number" id="gasNatureNumberRight"></div>
+    <div id="nJuMing"></div>
+  </div>
+<!--  <div class="gas-nature-number" id="gasNatureNumberRight"></div>-->
+</div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export  default {
+  title:"content-page",
+  data(){
+    return {
+      juMingIcon:require('src/assets/images/居民增长分析.png'),
+      juMingTitle:'居民用户增长分析',
+      juMingFont:6,
+
+      userTotalIcon1:require('../../assets/images/居民用户.png'),
+      userTotalIcon2:require('../../assets/images/非居民用户.png'),
+      residengtMonth:['1月','2月','3月','4月','5月','6月'],
+      nResidentMonth:['1月','2月','3月','4月','5月','6月'],
+
+      totalData:[{title:'居民用户',number:65412},{title:'非居民用户',number:5412}],
+      juMingIncrementData:[8000,8530,9560,10860,13000,13265],
+      nJuMingIncrementData:[456,789,100,1023,1500,1689],
+      juMjingNatureData:[{name: "生活用户", value: 487696}, {name: "壁挂锅炉", value: 99806}],
+      nJumingNatureData:[
+        { value: 335, name: "商业" },
+        { value: 310, name: "公福" },
+        { value: 274, name: "小区自备锅炉" },
+        { value: 235, name: "福利院校" },
+        { value: 235, name: "集中供热" },
+      ],
+    }
+  },
+  ready(){
+    this.getJuMingPie()
+    this.getJuMingLine()
+    this.getNJuMingPie()
+    this.getNJuMingLine()
+  },
+  methods:{
+    getNJuMingLine(){
+      let myChart = echarts.init(document.getElementById('nJuMing'));
+      let option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            lineStyle: {
+              color: "#dddc6b"
+            }
+          }
+        },
+        grid: {
+          left: "10",
+          top: "30",
+          right: "10",
+          bottom: "10",
+          containLabel: true
+        },
+
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              textStyle: {
+                color: "rgba(255,255,255,.6)",
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.2)"
+              }
+            },
+
+            data: this.nResidentMonth
+          },
+          {
+            axisPointer: { show: false },
+            axisLine: { show: false },
+            position: "bottom",
+            offset: 20
+          }
+        ],
+
+        yAxis: [
+          {
+            type: "value",
+            axisTick: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.1)"
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                color: "rgba(255,255,255,.6)",
+                fontSize: 12
+              }
+            },
+
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.1)"
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: "非居民用户",
+            type: "line",
+            smooth: true,
+            symbol: "circle",
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                color: "#00d887",
+                width: 2
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0, 216, 135, 0.4)"
+                    },
+                    {
+                      offset: 0.8,
+                      color: "rgba(0, 216, 135, 0.1)"
+                    }
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0, 0, 0, 0.1)"
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: "#00d887",
+                borderColor: "rgba(221, 220, 107, .1)",
+                borderWidth: 12
+              }
+            },
+            data: this.nJuMingIncrementData
+          }
+        ]
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function() {
+        myChart.resize();
+      });
+    },
+    getJuMingLine(){
+      console.log(document.getElementById('juMing'))
+      let myChart = echarts.init(document.getElementById('juMing'));
+      let option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            lineStyle: {
+              color: "#dddc6b"
+            }
+          }
+        },
+        grid: {
+          left: "10",
+          top: "30",
+          right: "10",
+          bottom: "10",
+          containLabel: true
+        },
+
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              textStyle: {
+                color: "rgba(255,255,255,.6)",
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.2)"
+              }
+            },
+
+            data: JSON.parse(JSON.stringify(this.residengtMonth))
+          },
+          {
+            axisPointer: { show: false },
+            axisLine: { show: false },
+            position: "bottom",
+            offset: 20
+          }
+        ],
+
+        yAxis: [
+          {
+            type: "value",
+            axisTick: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.1)"
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                color: "rgba(255,255,255,.6)",
+                fontSize: 12
+              }
+            },
+
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.1)"
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: "居民用户",
+            type: "line",
+            smooth: true,
+            symbol: "circle",
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                color: "#0184d5",
+                width: 2
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1, 132, 213, 0.4)"
+                    },
+                    {
+                      offset: 0.8,
+                      color: "rgba(1, 132, 213, 0.1)"
+                    }
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0, 0, 0, 0.1)"
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: "#0184d5",
+                borderColor: "rgba(221, 220, 107, .1)",
+                borderWidth: 12
+              }
+            },
+            data:this.juMingIncrementData
+          }
+        ]
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function() {
+        myChart.resize();
+      });
+    },
+    getNJuMingPie(){
+      // let data = JSON.parse(JSON.stringify(this.nJumingNatureData))
+      let arr = [{normal:{color:'#2A70EF'}},
+        {normal:{color:'#288ED5'}},
+        {normal:{color:'#48ABC8'}},
+        {normal:{color:'#A0E66C'}},
+        {normal:{color:'#F6CC5F'}},
+        {normal:{color:'#EE7A2F'}}]
+      let data = this.nJumingNatureData
+      data.forEach((item,index) => {
+        item.itemStyle = arr[index]
+      })
+      console.log(data)
+      let colorList = ['#2A70EF','#288ED5','#48ABC8','#A0E66C','#F6CC5F','#EE7A2F','#EE7A2F']
+      let myChart = echarts.init(document.getElementById('gasNatureNumberRight'));
+      let option = {
+        legend: {
+          // selectedMode: false, // 取消图例上的点击事件
+          type: "plain",
+          icon: "circle",
+          orient: "vertical",
+          left: "40%",
+          top: "23%",
+          align: "left",
+          itemGap: 15,
+          itemWidth: 10, // 设置宽度
+          itemHeight: 10, // 设置高度
+          symbolKeepAspect: false,
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                verticalAlign: "right",
+                align: "left",
+                width: 80,
+                fontSize: 12,
+              },
+              value: {
+                align: "left",
+                width: 60,
+                fontSize: 12,
+              },
+              count: {
+                align: "left",
+                width: 30,
+                fontSize: 12,
+              }
+            },
+          },
+          data: data.map((item) => item.name),
+          formatter: function (name) {
+            let className = "upRate";
+            let rateIcon = "▲";
+            if (data && data.length) {
+              let sum = 0
+              data.forEach(item => {
+                sum += item.value
+              });
+              for (var i = 0; i < data.length; i++) {
+                if (name === data[i].name) {
+
+                  return (
+                    "{name| " +
+                    name +
+                    "} " +
+                    "{value| " +
+                    data[i].value +
+                    "} " +
+                    "{count| " +
+                    ((data[i].value/sum)*100).toFixed(2) +
+                    "%} "
+                  );
+                }
+              }
+            }
+          },
+        },
+        visualMap: {
+          show: false,
+          min: 80,
+          max: 600,
+          inRange: {
+            colorLightness: [0, 1],
+          },
+        },
+        color: [
+          "#F6CC5F",
+          "rgb(0, 228, 196)"
+        ],
+        series: [
+          {
+            name: "非居民用户数",
+            type: "pie",
+            radius: "55%",
+            center: ["20%", "50%"],
+            data: data,
+            label: {
+              normal: {
+                show: false,
+                position: "center",
+                formatter: "{text|{c}}\n{b}",
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  return colorList[params.dataIndex]
+                }
+              }
+            },
+            // roseType: "angle",
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", function() {
+        myChart.resize();
+      });
+    },
+    getJuMingPie(){
+      // console.log('5555',this.$echarts)
+      // console.log(document.getElementById('gasNatureNumberLeft'))
+      let myChart = echarts.init(document.getElementById('gasNatureNumberLeft'));
+      let data = JSON.parse(JSON.stringify(this.juMjingNatureData))
+      let xdata = [];
+      data.forEach(item => {
+        xdata.push(item.name)
+      })
+      // // data = [{name: "生活用户", value: 487696}, {name: "壁挂锅炉", value: 99806}]
+      let option = {
+        title: {
+          // text: "{header1| 名称与占比}" + "{header2| 数量}" + "{header3| 比例}",
+          textAlign: "left",
+          left: "49%",
+          top: "30%",
+          textStyle: {
+            color: "#ccc",
+            rich: {
+              header1: {
+                width: 200,
+                fontSize: 15,
+              },
+              header2: {
+                width: 120,
+                fontSize: 15,
+              },
+              header3: {
+                fontSize: 15,
+              },
+            },
+          },
+        },
+        // tooltip: {
+        //   trigger: "item",
+        //   formatter: "{a} <br/>{b} : {c} ({d}%)",
+        // },
+        legend: {
+          // selectedMode: false, // 取消图例上的点击事件
+          orient: "vartical",
+          x: "left",
+          top: "60%",
+          left: "center",
+          bottom: "0%",
+          data: xdata,
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 20,
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                verticalAlign: "right",
+                align: "left",
+                width: 80,
+                fontSize: 14,
+              },
+              value: {
+                align: "left",
+                width: 70,
+                fontSize: 14,
+              },
+              count: {
+                align: "left",
+                width: 50,
+                fontSize: 14,
+              }
+            },
+          },
+          formatter: function (name) {
+            let className = "upRate";
+            let rateIcon = "▲";
+            if (data && data.length) {
+              let sum = 0
+              data.forEach(item => {
+                sum += item.value
+              });
+              for (var i = 0; i < data.length; i++) {
+                if (name === data[i].name) {
+                  return (
+                    "{name| " +
+                    name +
+                    "}" +
+                    "{value| " +
+                    data[i].value +
+                    "}" +
+                    "{count| " +
+                    ((data[i].value/sum)*100).toFixed(2) +
+                    "%} "
+                  );
+                }
+              }
+            }
+          },
+        },
+        graphic:{
+          type:'image',
+          left:'center',
+          top:'25%',
+          style:{
+            image:require('../../assets/images/居民用户.png'),
+            width:40,
+            height:35,
+
+          }
+        },
+        color: [
+          "rgb(0, 228, 196)",
+          "#F6CC5F"
+        ],
+        series: [
+          {
+            name: "居民用户",
+            type: "pie",
+            clockWise: true,
+            radius: ["40%", "55%"],
+            center: ["50%", "30%"],
+            data: data,
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  fontSize: "12",
+                },
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            clockWise: true,
+            hoverAnimation: false,
+            radius: [39, "30%"],
+            center: ["25%", "50%"]
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", function() {
+        myChart.resize({
+          width:100
+        });
+      });
+    },
+  }
+}
+</script>
+<style lang="less">
+#juMing{
+  width: 100%;
+  height: 50%;
+div{
+  height: 0%;
+}
+}
+#nJuMing{
+  width: 100%;
+  height: 50%;
+  div{
+    height: 0%;
+  }
+}
+</style>
+<style lang="less" scoped>
+#nJuMing{
+  width: 100%;
+  height: 50%;
+}
+#juMing{
+  width: 100%;
+  height: 50%;
+  div{
+    height: 10%;
+  }
+}
+.total-number{
+  width: 100%;
+  height: 6%;
+}
+.gas-nature-number{
+  width: 100%;
+  height: 38%;
+}
+</style>