system-phone 3.1.1 → 3.1.4

package/src/components/screen/ChargeContentPage.vue

@@ -1,656 +1,656 @@
-<template>
-  <div>
-    <div class="layui-container" style="background-color: darkblue;height: 100%;padding-top: 10px" >
-      <div class="layui-row" style="height: 10%;background-color: darkblue;">
-        <total-item
-          :text="totalData[0].text"
-          :charge-total-icon="imgChargeTotal1"
-          :number-color="totalNumberColor[0]"
-          :number="totalData[0].number"
-        ></total-item>
-      </div>
-      <div class="layui-row" style="height: 10%;background-color: darkblue;">
-        <total-item
-          :text="totalData[1].text"
-          :charge-total-icon="imgChargeTotal2"
-          :number-color="totalNumberColor[1]"
-          :number="totalData[1].number"
-        ></total-item>
-      </div>
-      <div class="layui-row" style="height: 10%;background-color: darkblue;">
-        <total-item
-          :text="totalData[2].text"
-          :charge-total-icon="imgChargeTotal3"
-          :number-color="totalNumberColor[2]"
-          :number="totalData[2].number"
-        ></total-item>
-      </div>
-      <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">
-        <module-title :font="countFont"></module-title>
-      </div>
-      <div class="layui-row" style="height: 50%;background-color: darkblue;margin-top: 10px">
-        <div class="count-data-list">
-          <div class="list-item" v-for="(index, item) in countData" style="height: 20%">
-            <list-count-item
-              :text="item.text"
-              :count="item.count"
-              :percentage="item.percentage"
-              :bar-color="countColor[index]"
-            >
-            </list-count-item>
-          </div>
-        </div>
-      </div>
-
-      <!--    <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">-->
-      <!--      <module-title-->
-      <!--        :module-tile-icon="chargeGasAnalysisIcon"-->
-      <!--        :title="chargeGasAnalysisTitle2"-->
-      <!--        :font="chargeGasAnalysisFont"-->
-      <!--      >-->
-      <!--      </module-title>-->
-      <!--    </div>-->
-
-
-      <!--    <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">-->
-      <!--      <div class="chart" id="saleGasAnalysys2"></div>-->
-      <!--    </div>-->
-    </div>
-    <div class="layui-container" style="height: 100%;background-color: darkblue;margin-top: -10px"
-    >
-      <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">
-        <module-title
-          :module-tile-icon="chargeGasAnalysisIcon"
-          :title="chargeGasAnalysisTitle1"
-          :font="chargeGasAnalysisFont"
-        >
-        </module-title>
-      </div>
-      <div class="layui-row" style="height: 50%;background-color: darkblue;margin-top: 10px">
-        <div class="chart" id="saleGasAnalysys1" style="background-color: darkblue"></div>
-      </div>
-
-
-    </div>
-    <div class="layui-container" style="background-color: darkblue;height: 100%;padding-top: 10px" >
-      <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">
-        <module-title :module-tile-icon="otherBusinessIcon"
-                      :title="otherBusinessTitle" :font="otherBusinessFont"></module-title>
-      </div>
-      <div class="layui-row" style="height: 50%;background-color: darkblue">
-        <div class="chart" id="saleGasAnalysys2" style="background-color: darkblue;height: 180%"></div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import * as echarts from 'echarts';
-export default {
-  title:"ChargeContentPage",
-  data(){
-    return {
-      otherBusinessIcon:require('src/assets/images/收费其他业务.png'),
-      otherBusinessTitle:'今日其他业务占比',
-      otherBusinessFont:5,
-      oterBusinessData:[
-        {
-          name: "开户",
-          value: 1232,
-        },
-        {
-          name: "补换折（卡）",
-          value: 754,
-        },
-        {
-          name: "换表清零",
-          value: 611,
-        },
-        {
-          name: "增容",
-          value: 400,
-        },
-        {
-          name: "销户",
-          value: 200,
-        },
-        {
-          name: "其他",
-          value: 466,
-        },
-      ],
-
-      leftChartSaleAmountData: [
-        1800, 2300, 1600, 1100, 600, 900, 1500, 500, 560, 700, 800, 1300,
-      ], //物联网表民用用气
-      leftChartNSaleAmountData: [
-        180, 1500, 900, 1300, 800, 350, 1200, 560, 120, 1300, 1452, 1700,
-      ], //物联网表非民用用气
-      tongBi: [24, 30, 20, 12, 90, 43, 19, 0, 0, 13, 60, 50], //同比
-      huanBi: [24, 16, 37, 66, 28, 75, 60, 80, 30, 65, 56, 79], //环比
-      monthData: [
-        "1月",
-        "2月",
-        "3月",
-        "4月",
-        "5月",
-        "6月",
-        "7月",
-        "8月",
-        "9月",
-        "10月",
-        "11月",
-        "12月",
-      ],
-      chargeGasAnalysisIcon: require("src/assets/images/收费售气量分析.png"),
-      chargeGasAnalysisTitle1: "售气量分析",
-      chargeGasAnalysisTitle2: "售气量分析(7-12月)",
-      chargeGasAnalysisFont: 5,
-      countColor: [
-        "#EE7A2F",
-        "#19FBAE",
-        "#F7DC3D",
-        "#FFA327",
-        "#29fb49",
-        "#EE7A2F",
-        "#EE7A2F",
-      ],
-      countData: [
-        {
-          text: "物联网表收费",
-          count: 12210,
-          percentage: "54%",
-          barColor: "#EE7A2F",
-        },
-        {
-          text: "金额卡表收费",
-          count: 8451,
-          percentage: "18%",
-          barColor: "#19FBAE",
-        },
-        {
-          text: "气量卡表收费",
-          count: 6358,
-          percentage: "12%",
-          barColor: "#F7DC3D",
-        },
-        {
-          text: "机表收费",
-          count: 4107,
-          percentage: "9%",
-          barColor: "#FFA327",
-        },
-        {
-          text: "超用收费",
-          count: 3318,
-          percentage: "7%",
-          barColor: "#29fb49",
-        },
-      ],
-      countFont:5,
-      imgChargeTotal1: require("src/assets/images/收费total1.png"),
-      imgChargeTotal2: require("src/assets/images/收费total2.png"),
-      imgChargeTotal3: require("src/assets/images/收费total3.png"),
-      totalNumberColor: ["#FFAC41", "#F7DC3D", "#00FFDE"],
-      totalData: [
-        { number: 1245137, text: "今日售气量" },
-        { number: 124513, text: "今日售气笔数" },
-        { number: 1000013, text: "今日售气金额" },
-      ],
-
-    }
-  },
-  ready(){
-    this.myLeftChart3()
-    this.otherBusineeChart()
-  },
-  methods:{
-    otherBusineeChart(){
-      let mychart = echarts.init(document.getElementById('saleGasAnalysys2'));
-      let data = JSON.parse(JSON.stringify(this.oterBusinessData));
-      let arrName = getArrayValue(data, "name");
-      let arrValue = getArrayValue(data, "value");
-      let sumValue = eval(arrValue.join("+"));
-      let objData = array2obj(data, "name");
-      let percentage = getArrPercentage(data,"name")
-      let optionData = getData(data);
-      function getArrayValue(array, key) {
-        var key = key || "value";
-        var res = [];
-        if (array) {
-          array.forEach(function (t) {
-            res.push(t[key]);
-          });
-        }
-        return res;
-      }
-
-      function array2obj(array, key) {
-        var resObj = {};
-        for (var i = 0; i < array.length; i++) {
-          resObj[array[i][key]] = array[i];
-        }
-        return resObj;
-      }
-      function getArrPercentage(arr,key) {
-        let percentageObj = {}
-        for(let i=0;i<data.length;i++){
-          percentageObj[arr[i][key]] = ((data[i].value / sumValue) * 100).toFixed(2) + "%"
-        }
-        return percentageObj
-      }
-      function getData(data) {
-        var res = {
-          series: [],
-          yAxis: [],
-        };
-        for (let i = 0; i < data.length; i++) {
-          // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
-          res.series.push({
-            name: "",
-            type: "pie",
-            clockWise: false, //顺时加载
-            hoverAnimation: false, //鼠标移入变大
-            radius: [78 - i * 13 + "%", 85 - i * 13 + "%"],
-            center: ["50%", "30%"],
-            label: {
-              show: false,
-            },
-            itemStyle: {
-              label: {
-                show: false,
-              },
-              labelLine: {
-                show: false,
-              },
-              borderWidth: 5,
-            },
-            data: [
-              {
-                value: data[i].value,
-                name: data[i].name,
-              },
-              {
-                value: sumValue - data[i].value,
-                name: "",
-                itemStyle: {
-                  color: "rgba(0,0,0,0)",
-                  borderWidth: 0,
-                },
-                tooltip: {
-                  show: false,
-                },
-                hoverAnimation: false,
-              },
-            ],
-          });
-          res.series.push({
-            name: "",
-            type: "pie",
-            silent: true,
-            z: 1,
-            clockWise: false, //顺时加载
-            hoverAnimation: false, //鼠标移入变大
-            radius: [78 - i * 13 + "%", 85 - i * 13 + "%"],
-            center: ["50%", "30%"],
-            label: {
-              show: false,
-            },
-            itemStyle: {
-              label: {
-                show: false,
-              },
-              labelLine: {
-                show: false,
-              },
-              borderWidth: 5,
-            },
-            data: [
-              {
-                value: 7.5,
-                itemStyle: {
-                  color: "rgb(0, 28, 124)",
-                  borderWidth: 0,
-                },
-                tooltip: {
-                  show: false,
-                },
-                hoverAnimation: false,
-              },
-              {
-                value: 2.5,
-                name: "",
-                itemStyle: {
-                  color: "rgb(0, 28, 124)",
-                  borderWidth: 0,
-                },
-                tooltip: {
-                  show: false,
-                },
-                hoverAnimation: false,
-              },
-            ],
-          });
-          // res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
-        }
-        return res;
-      }
-
-      let option = {
-        // backgroundColor: "#000",
-        legend: {
-          show: true,
-          icon: "circle",
-          top: "60%",
-          left: "5%",
-          data: arrName,
-          width: 50,
-          padding: [0, 10],
-          itemGap: 19,
-          formatter: function (name) {
-            return (
-              "{title|" + name + "}      {value|" + objData[name].value + "}   {title|" + percentage[name] + "}"
-            );
-          },
-
-          textStyle: {
-            rich: {
-              title: {
-                fontSize: 14,
-                lineHeight: 15,
-                color: "#B2B0CB",
-                width: 120
-              },
-              value: {
-                fontSize: 14,
-                lineHeight: 15,
-                color: "#B2B0CB",
-                width: 80
-              },
-            },
-          },
-        },
-        // tooltip: {
-        //   show: true,
-        //   trigger: "item",
-        //   formatter: "{a}<br>{b}:{c}({d}%)",
-        // },
-        color: [
-          "rgb(238, 122, 47)",
-          "rgb(0, 228, 196)",
-          "rgb(13, 126, 254)",
-          "rgb(247, 219, 53)",
-          "rgb(101, 223, 127)",
-          "rgb(255, 125, 125)"
-        ],
-        grid: {
-          top: "11%",
-          bottom: "60%",
-          left: "20%",
-          containLabel: false,
-        },
-        yAxis: [
-          {
-            type: "category",
-            inverse: true,
-            axisLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLabel: {
-              interval: 0,
-              inside: true,
-              textStyle: {
-                color: "#fff",
-                fontSize: 13,
-              },
-              show: true,
-            },
-            data: optionData.yAxis,
-          },
-        ],
-        xAxis: [
-          {
-            show: false,
-          },
-        ],
-        series: optionData.series,
-      };
-      mychart.setOption(option);
-      window.addEventListener("resize", function() {
-        mychart.resize();
-      });
-
-    },
-    myLeftChart3() {
-      let mychart = echarts.init(document.getElementById('saleGasAnalysys1'));
-
-      // 2. 指定配置和数据
-      let option = {
-        title: {
-          show: true,
-          text: "万m³",
-          textStyle: {
-            color: "rgba(255,255,255,.6)",
-            fontSize: 14,
-          },
-          left: 0,
-          top: 12,
-        },
-        color: [
-          new echarts.graphic.LinearGradient(
-            0,
-            0,
-            0,
-            1,
-            [
-              {
-                offset: 0.37,
-                color: "rgba(0,255,255,0.9)",
-              },
-              {
-                offset: 1,
-                color: "rgba(3,6,114,0.1)",
-              },
-            ],
-            false
-          ),
-          new echarts.graphic.LinearGradient(
-            0,
-            0,
-            0,
-            1,
-            [
-              {
-                offset: 0.37,
-                color: "rgba(1,245,152,0.9)",
-              },
-              {
-                offset: 1,
-                color: "rgba(3,6,114,0.1)",
-              },
-            ],
-            false
-          ),
-        ],
-
-        tooltip: {
-          // 通过坐标轴来触发
-          trigger: "axis",
-          axisPointer: {
-            type: "cross",
-            crossStyle: {
-              color: "#999",
-            },
-          },
-          formatter: function (params) {
-            let relVal = params[0].name;
-            for (let i = 0, l = params.length; i < l; i++) {
-              if (
-                params[i].seriesName === "同比" ||
-                params[i].seriesName === "环比"
-              ) {
-                relVal +=
-                  "<br/>" +
-                  params[i].seriesName +
-                  " : " +
-                  params[i].value +
-                  "%";
-              } else {
-                relVal +=
-                  "<br/>" + params[i].seriesName + " : " + params[i].value;
-              }
-            }
-            return relVal;
-          },
-        },
-        legend: {
-          // 距离容器10%
-          right: "30%",
-          // 修饰图例文字的颜色
-          textStyle: {
-            color: "#4c9bfd",
-          },
-          itemGap: 30,
-          // 如果series 里面设置了name，此时图例组件的data可以省略
-          // data: ["邮件营销", "联盟广告"]
-        },
-        grid: {
-          top: "18%",
-          left: "0",
-          right: "4%",
-          bottom: "3%",
-          show: true,
-          borderColor: "#012f4a",
-          containLabel: true,
-        },
-
-        xAxis: {
-          type: "category",
-          boundaryGap: true,
-          data: this.monthData,
-          // 去除刻度
-          axisTick: {
-            show: false,
-          },
-          // 修饰刻度标签的颜色
-          axisLabel: {
-            color: "rgba(255,255,255,.7)",
-          },
-          // 去除x坐标轴的颜色
-          axisLine: {
-            show: false,
-          },
-        },
-        yAxis: [
-          {
-            type: "value",
-            // interval: 500,
-            // max: 3500,
-            // 去除刻度
-            axisTick: {
-              show: false,
-            },
-            // 修饰刻度标签的颜色
-            axisLabel: {
-              color: "rgba(255,255,255,.7)",
-            },
-            // 修改y轴分割线的颜色
-            splitLine: {
-              lineStyle: {
-                color: "#012f4a",
-              },
-            },
-          },
-          {
-            name: "万m³",
-            type: "value",
-            nameTextStyle: {
-              color: "rgba(255,255,255,.7)",
-            },
-            // nameGap: 12,
-            // interval: 30,
-            // min: -90,
-            // 去除刻度
-            axisTick: {
-              show: false,
-            },
-            // 修饰刻度标签的颜色
-            axisLabel: {
-              color: "rgba(255,255,255,.7)",
-            },
-            // 修改y轴分割线的颜色
-            splitLine: {
-              show: false,
-              lineStyle: {
-                color: "#012f4a",
-              },
-            },
-          },
-        ],
-        series: [
-          {
-            name: "民用",
-            type: "bar",
-            barWidth: "15%",
-            barGap: 0,
-            emphasis: {
-              focus: "series",
-            },
-            data: JSON.parse(JSON.stringify(this.leftChartSaleAmountData)),
-          },
-          {
-            name: "非民用",
-            type: "bar",
-            barWidth: "15%",
-            barGap: "40%",
-            data: JSON.parse(JSON.stringify(this.leftChartNSaleAmountData)),
-          },
-          {
-            name: "同比",
-            type: "line",
-            stack: "总量",
-            // 是否让线条圆滑显示
-            smooth: true,
-            lineStyle: {
-              color: "rgba(193,162,81,.9)",
-              type: "dotted",
-              width: 3,
-              join: "miter",
-              miterLimit: 40,
-            },
-            showSymbol: false,
-            yAxisIndex: 1,
-            data: JSON.parse(JSON.stringify(this.tongBi)),
-          },
-          {
-            name: "环比",
-            type: "line",
-            stack: "总量",
-            lineStyle: {
-              color: "rgba(0,212,139,.9)",
-            },
-            smooth: true,
-            showSymbol: false, //取消折线的衔接点
-            yAxisIndex: 1,
-            data: JSON.parse(JSON.stringify(this.huanBi)),
-          },
-        ],
-      };
-      // 3. 把配置和数据给实例对象
-      mychart.setOption(option);
-      window.addEventListener("resize", function () {
-        mychart.resize();
-      });
-    },
-  }
-}
-</script>
-<style lang="less">
-#saleGasAnalysys1{
-  div{
-    height: 0%;
-  }
-}
-</style>
+<template>
+  <div>
+    <div class="layui-container" style="background-color: darkblue;height: 100%;padding-top: 10px" >
+      <div class="layui-row" style="height: 10%;background-color: darkblue;">
+        <total-item
+          :text="totalData[0].text"
+          :charge-total-icon="imgChargeTotal1"
+          :number-color="totalNumberColor[0]"
+          :number="totalData[0].number"
+        ></total-item>
+      </div>
+      <div class="layui-row" style="height: 10%;background-color: darkblue;">
+        <total-item
+          :text="totalData[1].text"
+          :charge-total-icon="imgChargeTotal2"
+          :number-color="totalNumberColor[1]"
+          :number="totalData[1].number"
+        ></total-item>
+      </div>
+      <div class="layui-row" style="height: 10%;background-color: darkblue;">
+        <total-item
+          :text="totalData[2].text"
+          :charge-total-icon="imgChargeTotal3"
+          :number-color="totalNumberColor[2]"
+          :number="totalData[2].number"
+        ></total-item>
+      </div>
+      <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">
+        <module-title :font="countFont"></module-title>
+      </div>
+      <div class="layui-row" style="height: 50%;background-color: darkblue;margin-top: 10px">
+        <div class="count-data-list">
+          <div class="list-item" v-for="(index, item) in countData" style="height: 20%">
+            <list-count-item
+              :text="item.text"
+              :count="item.count"
+              :percentage="item.percentage"
+              :bar-color="countColor[index]"
+            >
+            </list-count-item>
+          </div>
+        </div>
+      </div>
+
+      <!--    <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">-->
+      <!--      <module-title-->
+      <!--        :module-tile-icon="chargeGasAnalysisIcon"-->
+      <!--        :title="chargeGasAnalysisTitle2"-->
+      <!--        :font="chargeGasAnalysisFont"-->
+      <!--      >-->
+      <!--      </module-title>-->
+      <!--    </div>-->
+
+
+      <!--    <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">-->
+      <!--      <div class="chart" id="saleGasAnalysys2"></div>-->
+      <!--    </div>-->
+    </div>
+    <div class="layui-container" style="height: 100%;background-color: darkblue;margin-top: -10px"
+    >
+      <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">
+        <module-title
+          :module-tile-icon="chargeGasAnalysisIcon"
+          :title="chargeGasAnalysisTitle1"
+          :font="chargeGasAnalysisFont"
+        >
+        </module-title>
+      </div>
+      <div class="layui-row" style="height: 50%;background-color: darkblue;margin-top: 10px">
+        <div class="chart" id="saleGasAnalysys1" style="background-color: darkblue"></div>
+      </div>
+
+
+    </div>
+    <div class="layui-container" style="background-color: darkblue;height: 100%;padding-top: 10px" >
+      <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">
+        <module-title :module-tile-icon="otherBusinessIcon"
+                      :title="otherBusinessTitle" :font="otherBusinessFont"></module-title>
+      </div>
+      <div class="layui-row" style="height: 50%;background-color: darkblue">
+        <div class="chart" id="saleGasAnalysys2" style="background-color: darkblue;height: 180%"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export default {
+  title:"ChargeContentPage",
+  data(){
+    return {
+      otherBusinessIcon:require('src/assets/images/收费其他业务.png'),
+      otherBusinessTitle:'今日其他业务占比',
+      otherBusinessFont:5,
+      oterBusinessData:[
+        {
+          name: "开户",
+          value: 1232,
+        },
+        {
+          name: "补换折（卡）",
+          value: 754,
+        },
+        {
+          name: "换表清零",
+          value: 611,
+        },
+        {
+          name: "增容",
+          value: 400,
+        },
+        {
+          name: "销户",
+          value: 200,
+        },
+        {
+          name: "其他",
+          value: 466,
+        },
+      ],
+
+      leftChartSaleAmountData: [
+        1800, 2300, 1600, 1100, 600, 900, 1500, 500, 560, 700, 800, 1300,
+      ], //物联网表民用用气
+      leftChartNSaleAmountData: [
+        180, 1500, 900, 1300, 800, 350, 1200, 560, 120, 1300, 1452, 1700,
+      ], //物联网表非民用用气
+      tongBi: [24, 30, 20, 12, 90, 43, 19, 0, 0, 13, 60, 50], //同比
+      huanBi: [24, 16, 37, 66, 28, 75, 60, 80, 30, 65, 56, 79], //环比
+      monthData: [
+        "1月",
+        "2月",
+        "3月",
+        "4月",
+        "5月",
+        "6月",
+        "7月",
+        "8月",
+        "9月",
+        "10月",
+        "11月",
+        "12月",
+      ],
+      chargeGasAnalysisIcon: require("src/assets/images/收费售气量分析.png"),
+      chargeGasAnalysisTitle1: "售气量分析",
+      chargeGasAnalysisTitle2: "售气量分析(7-12月)",
+      chargeGasAnalysisFont: 5,
+      countColor: [
+        "#EE7A2F",
+        "#19FBAE",
+        "#F7DC3D",
+        "#FFA327",
+        "#29fb49",
+        "#EE7A2F",
+        "#EE7A2F",
+      ],
+      countData: [
+        {
+          text: "物联网表收费",
+          count: 12210,
+          percentage: "54%",
+          barColor: "#EE7A2F",
+        },
+        {
+          text: "金额卡表收费",
+          count: 8451,
+          percentage: "18%",
+          barColor: "#19FBAE",
+        },
+        {
+          text: "气量卡表收费",
+          count: 6358,
+          percentage: "12%",
+          barColor: "#F7DC3D",
+        },
+        {
+          text: "机表收费",
+          count: 4107,
+          percentage: "9%",
+          barColor: "#FFA327",
+        },
+        {
+          text: "超用收费",
+          count: 3318,
+          percentage: "7%",
+          barColor: "#29fb49",
+        },
+      ],
+      countFont:5,
+      imgChargeTotal1: require("src/assets/images/收费total1.png"),
+      imgChargeTotal2: require("src/assets/images/收费total2.png"),
+      imgChargeTotal3: require("src/assets/images/收费total3.png"),
+      totalNumberColor: ["#FFAC41", "#F7DC3D", "#00FFDE"],
+      totalData: [
+        { number: 1245137, text: "今日售气量" },
+        { number: 124513, text: "今日售气笔数" },
+        { number: 1000013, text: "今日售气金额" },
+      ],
+
+    }
+  },
+  ready(){
+    this.myLeftChart3()
+    this.otherBusineeChart()
+  },
+  methods:{
+    otherBusineeChart(){
+      let mychart = echarts.init(document.getElementById('saleGasAnalysys2'));
+      let data = JSON.parse(JSON.stringify(this.oterBusinessData));
+      let arrName = getArrayValue(data, "name");
+      let arrValue = getArrayValue(data, "value");
+      let sumValue = eval(arrValue.join("+"));
+      let objData = array2obj(data, "name");
+      let percentage = getArrPercentage(data,"name")
+      let optionData = getData(data);
+      function getArrayValue(array, key) {
+        var key = key || "value";
+        var res = [];
+        if (array) {
+          array.forEach(function (t) {
+            res.push(t[key]);
+          });
+        }
+        return res;
+      }
+
+      function array2obj(array, key) {
+        var resObj = {};
+        for (var i = 0; i < array.length; i++) {
+          resObj[array[i][key]] = array[i];
+        }
+        return resObj;
+      }
+      function getArrPercentage(arr,key) {
+        let percentageObj = {}
+        for(let i=0;i<data.length;i++){
+          percentageObj[arr[i][key]] = ((data[i].value / sumValue) * 100).toFixed(2) + "%"
+        }
+        return percentageObj
+      }
+      function getData(data) {
+        var res = {
+          series: [],
+          yAxis: [],
+        };
+        for (let i = 0; i < data.length; i++) {
+          // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
+          res.series.push({
+            name: "",
+            type: "pie",
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            radius: [78 - i * 13 + "%", 85 - i * 13 + "%"],
+            center: ["50%", "30%"],
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+              borderWidth: 5,
+            },
+            data: [
+              {
+                value: data[i].value,
+                name: data[i].name,
+              },
+              {
+                value: sumValue - data[i].value,
+                name: "",
+                itemStyle: {
+                  color: "rgba(0,0,0,0)",
+                  borderWidth: 0,
+                },
+                tooltip: {
+                  show: false,
+                },
+                hoverAnimation: false,
+              },
+            ],
+          });
+          res.series.push({
+            name: "",
+            type: "pie",
+            silent: true,
+            z: 1,
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            radius: [78 - i * 13 + "%", 85 - i * 13 + "%"],
+            center: ["50%", "30%"],
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+              borderWidth: 5,
+            },
+            data: [
+              {
+                value: 7.5,
+                itemStyle: {
+                  color: "rgb(0, 28, 124)",
+                  borderWidth: 0,
+                },
+                tooltip: {
+                  show: false,
+                },
+                hoverAnimation: false,
+              },
+              {
+                value: 2.5,
+                name: "",
+                itemStyle: {
+                  color: "rgb(0, 28, 124)",
+                  borderWidth: 0,
+                },
+                tooltip: {
+                  show: false,
+                },
+                hoverAnimation: false,
+              },
+            ],
+          });
+          // res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
+        }
+        return res;
+      }
+
+      let option = {
+        // backgroundColor: "#000",
+        legend: {
+          show: true,
+          icon: "circle",
+          top: "60%",
+          left: "5%",
+          data: arrName,
+          width: 50,
+          padding: [0, 10],
+          itemGap: 19,
+          formatter: function (name) {
+            return (
+              "{title|" + name + "}      {value|" + objData[name].value + "}   {title|" + percentage[name] + "}"
+            );
+          },
+
+          textStyle: {
+            rich: {
+              title: {
+                fontSize: 14,
+                lineHeight: 15,
+                color: "#B2B0CB",
+                width: 120
+              },
+              value: {
+                fontSize: 14,
+                lineHeight: 15,
+                color: "#B2B0CB",
+                width: 80
+              },
+            },
+          },
+        },
+        // tooltip: {
+        //   show: true,
+        //   trigger: "item",
+        //   formatter: "{a}<br>{b}:{c}({d}%)",
+        // },
+        color: [
+          "rgb(238, 122, 47)",
+          "rgb(0, 228, 196)",
+          "rgb(13, 126, 254)",
+          "rgb(247, 219, 53)",
+          "rgb(101, 223, 127)",
+          "rgb(255, 125, 125)"
+        ],
+        grid: {
+          top: "11%",
+          bottom: "60%",
+          left: "20%",
+          containLabel: false,
+        },
+        yAxis: [
+          {
+            type: "category",
+            inverse: true,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              interval: 0,
+              inside: true,
+              textStyle: {
+                color: "#fff",
+                fontSize: 13,
+              },
+              show: true,
+            },
+            data: optionData.yAxis,
+          },
+        ],
+        xAxis: [
+          {
+            show: false,
+          },
+        ],
+        series: optionData.series,
+      };
+      mychart.setOption(option);
+      window.addEventListener("resize", function() {
+        mychart.resize();
+      });
+
+    },
+    myLeftChart3() {
+      let mychart = echarts.init(document.getElementById('saleGasAnalysys1'));
+
+      // 2. 指定配置和数据
+      let option = {
+        title: {
+          show: true,
+          text: "万m³",
+          textStyle: {
+            color: "rgba(255,255,255,.6)",
+            fontSize: 14,
+          },
+          left: 0,
+          top: 12,
+        },
+        color: [
+          new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0.37,
+                color: "rgba(0,255,255,0.9)",
+              },
+              {
+                offset: 1,
+                color: "rgba(3,6,114,0.1)",
+              },
+            ],
+            false
+          ),
+          new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0.37,
+                color: "rgba(1,245,152,0.9)",
+              },
+              {
+                offset: 1,
+                color: "rgba(3,6,114,0.1)",
+              },
+            ],
+            false
+          ),
+        ],
+
+        tooltip: {
+          // 通过坐标轴来触发
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+          formatter: function (params) {
+            let relVal = params[0].name;
+            for (let i = 0, l = params.length; i < l; i++) {
+              if (
+                params[i].seriesName === "同比" ||
+                params[i].seriesName === "环比"
+              ) {
+                relVal +=
+                  "<br/>" +
+                  params[i].seriesName +
+                  " : " +
+                  params[i].value +
+                  "%";
+              } else {
+                relVal +=
+                  "<br/>" + params[i].seriesName + " : " + params[i].value;
+              }
+            }
+            return relVal;
+          },
+        },
+        legend: {
+          // 距离容器10%
+          right: "30%",
+          // 修饰图例文字的颜色
+          textStyle: {
+            color: "#4c9bfd",
+          },
+          itemGap: 30,
+          // 如果series 里面设置了name，此时图例组件的data可以省略
+          // data: ["邮件营销", "联盟广告"]
+        },
+        grid: {
+          top: "18%",
+          left: "0",
+          right: "4%",
+          bottom: "3%",
+          show: true,
+          borderColor: "#012f4a",
+          containLabel: true,
+        },
+
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          data: this.monthData,
+          // 去除刻度
+          axisTick: {
+            show: false,
+          },
+          // 修饰刻度标签的颜色
+          axisLabel: {
+            color: "rgba(255,255,255,.7)",
+          },
+          // 去除x坐标轴的颜色
+          axisLine: {
+            show: false,
+          },
+        },
+        yAxis: [
+          {
+            type: "value",
+            // interval: 500,
+            // max: 3500,
+            // 去除刻度
+            axisTick: {
+              show: false,
+            },
+            // 修饰刻度标签的颜色
+            axisLabel: {
+              color: "rgba(255,255,255,.7)",
+            },
+            // 修改y轴分割线的颜色
+            splitLine: {
+              lineStyle: {
+                color: "#012f4a",
+              },
+            },
+          },
+          {
+            name: "万m³",
+            type: "value",
+            nameTextStyle: {
+              color: "rgba(255,255,255,.7)",
+            },
+            // nameGap: 12,
+            // interval: 30,
+            // min: -90,
+            // 去除刻度
+            axisTick: {
+              show: false,
+            },
+            // 修饰刻度标签的颜色
+            axisLabel: {
+              color: "rgba(255,255,255,.7)",
+            },
+            // 修改y轴分割线的颜色
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#012f4a",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "民用",
+            type: "bar",
+            barWidth: "15%",
+            barGap: 0,
+            emphasis: {
+              focus: "series",
+            },
+            data: JSON.parse(JSON.stringify(this.leftChartSaleAmountData)),
+          },
+          {
+            name: "非民用",
+            type: "bar",
+            barWidth: "15%",
+            barGap: "40%",
+            data: JSON.parse(JSON.stringify(this.leftChartNSaleAmountData)),
+          },
+          {
+            name: "同比",
+            type: "line",
+            stack: "总量",
+            // 是否让线条圆滑显示
+            smooth: true,
+            lineStyle: {
+              color: "rgba(193,162,81,.9)",
+              type: "dotted",
+              width: 3,
+              join: "miter",
+              miterLimit: 40,
+            },
+            showSymbol: false,
+            yAxisIndex: 1,
+            data: JSON.parse(JSON.stringify(this.tongBi)),
+          },
+          {
+            name: "环比",
+            type: "line",
+            stack: "总量",
+            lineStyle: {
+              color: "rgba(0,212,139,.9)",
+            },
+            smooth: true,
+            showSymbol: false, //取消折线的衔接点
+            yAxisIndex: 1,
+            data: JSON.parse(JSON.stringify(this.huanBi)),
+          },
+        ],
+      };
+      // 3. 把配置和数据给实例对象
+      mychart.setOption(option);
+      window.addEventListener("resize", function () {
+        mychart.resize();
+      });
+    },
+  }
+}
+</script>
+<style lang="less">
+#saleGasAnalysys1{
+  div{
+    height: 0%;
+  }
+}
+</style>