<template>
  <div class="chart_con" id="barchartCon"></div>
</template>
<script>
import { getEvvmChipStatus2 } from '@/api/screen'
export default {
  name: 'barChart',
  props: {
    chipStates: Array
  },
  methods:{
    // getData(){
    //   getEvvmChipStatus2().then(response => {
    //     var data = response.data
    //     var option = this.option
    //     option.series[0].data[0].value = data.used
    //     option.series[0].data[1].value = data.act
    //     option.series[0].data[2].value = data.noAct
    //     this.myChart.setOption(option);
    //   });
    // },
	  myEcharts(){
      var token = localStorage.getItem("token")
      var chipStates = this.chipStates
      console.log(chipStates)
		  this.myChart = this.echarts.init(document.getElementById('barchartCon'));
		  this.option = {
        color:["#3E9DFF","#EE9C17","#E82A30"],
			  title: {
				  show:false
			  },
        grid:{
          top:"12%",
          left:"12%",
          right:"5%",
          bottom:"12%",
        },
			  tooltip: {
				  show:true
        },
			  legend: {
          data:['全程温控', '实时温控', '追溯标签'],
				  top:5,
          icon:"rect",
          itemWidth:12,
          itemHeight:8,
          textStyle:{
            fontSize:8,
            color:"#ffffff",
          },
			  },
        xAxis: {
            type: 'category',
            data: token?(chipStates.map(o=>o.productTypeName)):[ '2016', '2017', '2018', '2019', '2020', '2021'],
            axisLine:{
              lineStyle:{
                color:"#0E61B6",
              }
            },
            axisTick:{
              show:false
            },
            axisLabel:{
              color:"#ffffff",
              fontSize:8,
            },
            splitLine:{
              show:true,
              lineStyle:{
                color:"#0E61B6",
                opacity:0.2,
              }
            },
        },
        yAxis: {
            type: 'value',
            axisLine:{
              lineStyle:{
                color:"#0E61B6",
              }
            },
            axisTick:{
              show:false
            },
            axisLabel:{
              color:"#ffffff",
              fontSize:8,
            },
            splitLine:{
              show:true,
              lineStyle:{
                color:"#0E61B6",
                opacity:0.2,
              }
            },
            animationDuration: 300,
            animationDurationUpdate: 300,
        },
			  series: [
          {
            name: '全程温控',
            type: 'bar',
            barMaxWidth:15,
            barMinHeight :5,
            data: token?chipStates.map(o=>o.state10):[120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '实时温控',
            type: 'bar',
            barMaxWidth:15,
            barMinHeight :5,
            data: token?chipStates.map(o=>o.state11):[120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '追溯标签',
            type: 'bar',
            barMaxWidth:15,
            barMinHeight :5,
            data: token?chipStates.map(o=>o.state20):[120, 132, 101, 134, 90, 230, 210]
          },
        ]
		  };
      //this.getData();
		  this.myChart.setOption(this.option);
    }
  },
  mounted() {
  	this.myEcharts();
  }
}
</script>
<style>
  .chart_con{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: transparent;}
</style>