<template>
  <div class="chart_con" id="pie4ChartCon"></div>
</template>
<script>
export default {
  name: 'pie4Chart',
  data(){
    return{
      list:{error11: 100, warning20: 100, warning11:100, total11: 500, total10: 300, error20: 100, total20: 600}
    }
  },
  props: {
    warningState:{
      default:{error11: 100, warning20: 100, warning11:100, total11: 500, total10: 300, error20: 100, total20: 600},
    },
  },
  watch: {
      warningState(){
        this.myEcharts()
      },
  },
  methods:{
	  myEcharts(){
      var that = this
      var token = localStorage.getItem("token")
      var list = this.list
      if(token)list = this.warningState
      list.total = list.total10 + list.total11 + list.total20
		  this.myChart = this.echarts.init(document.getElementById('pie4ChartCon'));
		  this.option = {
        color:["#23D9E9","#7A4AFF","#FFAE36","#00C26B"],
			  title: {
				  show:false
			  },
        grid:{
          top:"22%",
          left:"5%",
          right:"5%",
          bottom:"12%",
        },
			  tooltip: {
				  show:true
        },
			  legend: {
          data:['总数', '全程温度', '实时温控', '追溯标签'],
				  top:5,
          icon:"rect",
          right:"5%",
          itemWidth:12,
          itemHeight:8,
          textStyle:{
            fontSize:8,
            color:"#ffffff",
          },
			  },
			  series: [
          ...that.setOptItem("#23D9E9","12%",list.total,list.total,'总数'),
          ...that.setOptItem("#7A4AFF","37%",list.total11,list.total,'全程温度'),
          ...that.setOptItem("#FFAE36","62%",list.total20,list.total,'实时温控'),
          ...that.setOptItem("#00C26B","87%",list.total10,list.total,'追溯标签'),
        ]
		  };
		  this.myChart.setOption(this.option);
    },
    setOptItem(color,pos,num,total,name){
      return [{
          type: 'pie',
          silent:1,
          radius: ['60%', '62%'],
          center: [pos, '60%'],
          label:{
            show:false,
          },
          labelLine:0,
          data: [
            {value:1,itemStyle:{color:color,}},
            {value:0,itemStyle:{color:color,}},
          ],
          animation:0,
        },
        {
          type: 'pie',
          silent:1,
          radius: ['35%', '50%'],
          center: [pos, '60%'],
          label:{
            show:false,
          },
          data: [
            {value:num,name,itemStyle:{color:color,},
              label: {
                show: 1,
                fontSize:12,
                color:color,
                position: 'center',
                formatter:"{c}"
              },
            },
            {value:(num==0?1:(total-num)),name:"",itemStyle:{color:"#1C5FA5",}},
          ],
        },]
    },

  },
  mounted() {
  	this.myEcharts();
  }
}
</script>
<style>
  .chart_con{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: transparent;}
</style>