<!--类别统计-->
<template>
  <div class="categoryStatistics">
    <div class="title-box-max-box">
      <div class="title-left-box">
        <p></p>
        <p>类别占比</p>
      </div>
      <div class="title-right-box">

      </div>
    </div>
    <img class="null-data-img" v-show="!dataType" src="@/assets/ZDimages/basicsModules/null-data-1.png">
    <div id="eCharts-category" v-show="dataType"></div>
    <div class="position-max-box" v-show="dataType">
      <div class="position-for-box" v-for="(item,index) in newData" :key="index">
        <p :style="'background:'+eChartsListColor[index]+';'"></p>
        <p>{{item.classifyAttribute}}</p>
        <p>{{item.chemicalMix}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { chemicalIndexChemicalGroup, chemicalIndexTypeGroup } from '@/api/chemicalManage'

  export default {
    name: 'categoryStatistics',
    data () {
      return {
        dataType:false,
        eChartsListColor : ["#009DFF","#0045AF","#FFA200", "#FF2A00", "#A069FF", "#63FFE5", "#C4C4C4"],
        maxNum:0,
        // data1:[
        //   {
        //     name:"易燃气体",
        //     value:"4",
        //     classifyAttribute: "易燃气体",
        //     chemicalMix: "4%"
        //   },
        //   {
        //     name:"易燃液体",
        //     value:"4",
        //     classifyAttribute: "易燃液体",
        //     chemicalMix: "4%"
        //   },
        //   {
        //     name:"爆炸品",
        //     value:"32",
        //     classifyAttribute: "爆炸品",
        //     chemicalMix: "32%"
        //   },
        //   {
        //     name:"有毒品",
        //     value:"21",
        //     classifyAttribute: "有毒品",
        //     chemicalMix: "21%"
        //   },
        //   {
        //     name:"压缩气体或液化气体",
        //     value:"15",
        //     classifyAttribute: "压缩气体或液化气体",
        //     chemicalMix: "15%"
        //   },
        //   {
        //     name:"易挥发",
        //     value:"14",
        //     classifyAttribute: "易挥发",
        //     chemicalMix: "14%"
        //   },
        //   {
        //     name:"其他",
        //     value:"10",
        //     classifyAttribute: "其他",
        //     chemicalMix: "10%"
        //   }
        // ],
        newData:[],
      }
    },
    created(){
      this.chemicalIndexChemicalGroup();
    },
    mounted(){


    },
    methods:{
      //获取数据
      getInfo(){
        this.$set(this,'dataType',true);
        this.eChartsDraw();
      },
      chemicalIndexChemicalGroup(){
        let self=this;
        let list=[];
        chemicalIndexChemicalGroup().then(response => {
          self.maxNum=response.data.count;
          response.data.list.forEach(function(item,index) {
            list.push({name:item.name,value:item.number,classifyAttribute:item.name,chemicalMix:item.ratio})
          })
          this.$set(this, 'newData',list)
          this.getInfo();
        });
      },
      //eCharts绘制
      eChartsDraw(){
        let myChart = this.$echarts.init(document.getElementById('eCharts-category'));
        let bgColor = "#fff";
        let title = "化学品总数";
        let echartData = this.newData;
        let formatNumber = function (num) {
          let reg = /(?=(\B)(\d{3})+$)/g;
          return num.toString().replace(reg, ",");
        };
        let option = {
          backgroundColor: bgColor,
          color: this.eChartsListColor,
          title: [
            {
              text: "{name|" + title + "}\n{val|" + formatNumber(this.maxNum) + "}",
              top: "center",
              left: "center",
              type:false,
              textStyle: {
                rich: {
                  name: {
                    fontSize: 18,
                    fontWeight: "normal",
                    color: "#333333",
                    padding: [10, 0],
                  },
                  val: {
                    fontSize: 18,
                    fontWeight: "normal",
                    color: "#333333",
                  },
                },
              },
            },
          ],
          series: [
            {
              type: "pie",
              radius: ["50%", "70%"],
              center: ["50%", "50%"],
              data: echartData,
              hoverAnimation: false,
              itemStyle: {
                normal: {
                  borderColor: bgColor,
                  borderWidth: 2,
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              label: {
                normal: {
                  show: false,
                },
              },
            },
          ],
        };
        myChart.setOption(option);
      },
    },
  }
</script>
<style scoped lang="scss">
  .categoryStatistics{
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
    border-radius: 10px;
    width:600px;
    height:351px;
    position: relative;
    .title-box-max-box{
      display: flex;
      padding:24px 22px;
      .title-left-box{
        display: flex;
        p:nth-child(1){
          width:4px;
          height:18px;
          margin-right:11px;
          background: #0183FA;
        }
        p:nth-child(2){
          color:#333;
          font-size:18px;
          line-height:18px;
        }
      }
      .title-right-box{

      }
    }
    .null-data-img{
      display: block;
      margin:0 auto;
      width:176px;
      vertical-align: top;
      text-align: center;
      line-height:300px;
    }
    #eCharts-category{
      width:280px;
      height:284px;
    }
    .position-max-box{
      position: absolute;
      top:70px;
      right:37px;
      .position-for-box{
        width:280px;
        display: flex;
        p{
          line-height:38px;
          font-size:16px;
          color:#333;
        }
        p:nth-child(1){
          width:14px;
          height:14px;
          margin:12px 10px 12px 0;
        }
        p:nth-child(2){
          flex:1;
        }
        p:nth-child(3){
          text-align: right;
        }
      }
    }
  }
</style>
