<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>
