<template>
  <div class="chart_con" id="lineChartCon"></div>
</template>
<script>
// import { getEvvmChipStatus2 } from '@/api/screen'
export default {
  name: 'lineChart',
  data(){
    return{
      list:[]
    }
  },
  props: {
    chaintemp: 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 list = this.chaintemp
		  this.myChart = this.echarts.init(document.getElementById('lineChartCon'));
		  this.option = {
        color:["#23D9E9","#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',
            boundaryGap: false,
            data: list.map(o=>o.createTime),//['2015', '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: 100,
            animationDurationUpdate: 100,
        },
			  series: [
          {
            name: '正常',
            type: 'line',
            stack: '总量',
            smooth: true,
            areaStyle: {
              opacity:0.3,
            },
            lineStyle : {
              width:1,
            },
            emphasis: {
                focus: 'series'
            },
            data: list.map(o=>o.temp),//[120, 132, 101, 134, 90, 230, 210],
            animationDuration: 5000,
          },
          // {
          //   name: '预警',
          //   type: 'line',
          //   stack: '总量',
          //   smooth: true,
          //   areaStyle: {
          //     opacity:0.3,
          //   },
          //   lineStyle : {
          //     width:1,
          //   },
          //   emphasis: {
          //       focus: 'series'
          //   },
          //   data: [120, 132, 101, 134, 90, 230, 210],
          //   animationDuration: 5000,
          // },
          // {
          //   name: '报警',
          //   type: 'line',
          //   smooth: true,
          //   stack: '总量',
          //   areaStyle: {
          //     opacity:0.3,
          //   },
          //   lineStyle : {
          //     width:1,
          //   },
          //   emphasis: {
          //       focus: 'series'
          //   },
          //   data: [120, 132, 101, 134, 90, 230, 210],
          //   animationDuration: 5000,
          // },
        ]
		  };
      //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>