<template>
  <div 
    :id="id" 
    :style="`width:${curWidth}px;height:${curHeight}px`"
  >
  </div>
</template>
<script>
/**
 * @author chenyanqing
 * @date 2019/10/19
 * @Description bar+line（城市治理-交通治理）
 * @props 数据格式：{
 *    id: 'traffic_govern_id',
      width: 0,
      height: 0,
      xAxisData: ['燃气管线报警','燃气管线报警','燃气管线报警'],
      legend: ['总数量','抢修次数','抢修率'],
      yAxisData: [ [200, 34.9, 57 ],[206, 200, 145 ],[220, 266, 163 ]]
    }
 * 
 */

import {countSize} from "@/utils/utils"
export default {
  props: ['id','width','height','xAxisData','yAxisData','legend'],
  data(){
    return {
      curWidth: this.width,
      curHeight: this.height,
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: "0",
          right: "0",
          bottom: "22",
          top: countSize(.3),
          containLabel: true
        },
        legend: {
          data:[], //此处存放lengend数据
          textStyle:{
            color:'#fff',
          },
          top : '-5',
          left: 10,
          align: "left",
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            color: "#fff",
            fontSize: 11,
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap:'false',
            data: [],  //此处存放x轴数据
            axisPointer: { 
              type: 'shadow'
            },
            splitLine: {
              show: true,
              lineStyle: {
                width:'1',
                color: '#101641',
                type: 'dashed'
              }
            },
            axisLine: {
              formatter: '{value}',
              lineStyle: {
                color: '#101d5d'
              }
            },
            axisLabel : {
              color:'#fff',
              fontSize:'60%',
              align: 'right'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '起',
            interval: 50,
            splitLine: {
              show: true,
              lineStyle: {
                width:'1',
                color:'#101641',
                type: 'dashed'
              }
            },
            nameTextStyle:{
              color:"#fff",
              fontSize:'60%',
              verticalAlign:'middle',
            },
            axisLabel : {
              color:'#fff', 
              fontSize:'50%',
            },
            axisLine: {
              lineStyle: {
                color: '#101d5d',
                fontSize:'50%',
              }
            },
          },
          {
            type: 'value',
            name: '',
            interval: 50,
            splitLine: {
              show: true,
              lineStyle: {
                width:'1',
                color:'#101641',
                type: 'dashed'
              }
            },
            axisLine: {
              formatter: '{value}',
              lineStyle: {
                color: '#101d5d', //y轴线的颜色
                fontSize: '50%',
              }
            },
            axisLabel : {
              color:'#fff',//Y轴单位颜色
              formatter: '{value}%',
              fontSize:'50%',
            },
          }
        ],
        series: [
          {
            name:'管线条数',
            type:'bar',
            itemStyle:{
              color : new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,//变化度
                [ {
                  offset : 0,
                  color : '#ffc21f'
                }, {
                  offset : 1,
                  color : '#ff5b1f'
                } ]),
            },
            data:[]
          },
          {
            name:'抢修次数',
            type:'bar',
            itemStyle:{
              color : new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,//变化度
                [ {
                  offset : 0,
                  color : '#28d8e8'
                }, {
                  offset : 1,
                  color : '#048af0'
                } ]),
            },
            data:[]
          },
          {
            name:'抢修率',
            type:'line',
            yAxisIndex: 1,
            boundaryGap:'true',
            symbol:'circle',  //去掉折线节点
            smooth:true,  //曲线变平滑
            areaStyle: {
              color : new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,//变化度
                //三种由深及浅的颜色
                [ {
                  offset : 0,
                  color : 'rgba(255,45,82, .8)'
                }, {
                  offset : 1,
                  color : 'rgba(0,0,0, .3)'
                } ]),
            },
            data: []
          }
        ]
      },
    }
  },
  watch : {
    width(newVal, oldVal){
      this.curWidth = newVal;
      this.refreshEchart()
    },
    height(newVal, oldVal){
      this.curHeight = newVal;
      this.refreshEchart()
    },
    legend(newVal, oldVal){
      this.option.legend.data = newVal;
      this.refreshEchart()
    },
    xAxisData(newVal, oldVal){
      this.option.xAxis[0].data = newVal;
      this.refreshEchart()
    },
    yAxisData(newVal, oldVal){
      this.option.series[0].data = newVal[0];
      this.option.series[1].data = newVal[1];
      this.option.series[2].data = newVal[2];
      this.refreshEchart()
    }
  },
  mounted() {
    if(this.xAxisData){
      this.option.legend.data = this.legend;
      this.option.series[0].data = this.yAxisData[0];
      this.option.series[1].data = this.yAxisData[1];
      this.option.series[2].data = this.yAxisData[2];
      this.option.xAxis[0].data = this.xAxisData;
      this.initEchart();
    }
  },
  methods:{
    refreshEchart(){
      if(this.curWidth && this.curHeight && this.xAxisData.length && this.yAxisData.length){
        this.initEchart();
      }
    },
    initEchart() {
      const _div = document.getElementById(this.id);
      setTimeout(() => {
        let myChart = this.$echarts.init(_div);
          myChart.setOption(this.option,true);
          window.onresize = myChart.resize;
      }, 500);
    }
  }
};
</script>

<style scoped>
</style>