<template>
  <div 
    :id="id" 
    :style="`width:${curWidth}px;height:${curHeight}px`"
  >
  </div>
</template>
<script>
/**
 * @author chenyanqing
 * @date 2019/10/19
 * @Description line
 * @props 数据格式：{
 *    id: 'echart-rzqyfx',
      width: 0,
      height: 0,
      xAxisData:["9.24","9.24","9.24","9.24","9.24","9.24","9.24"],
      yAxisData: [
        {name:'总数量',data:[855, 1078, 856, 865, 990, 782, 1210],color:'255,45,82'}
      ]
    }
 * 
 */

import { countSize } from "@/utils/utils"
export default {
  props: ['id','width','height','xAxisData','yAxisData'],
  data(){
    return {
      curWidth: this.width,
      curHeight: this.height,
      option: {
        // color: ['#ff2d55', "#0090ff", "#ffcc00" ],
        grid: {
          left: "6",
          right: "28",
          bottom: 10,
          top: 0,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: 12
          },
          axisPointer: {  
            type: "cross",   // 十字准星指示器
            label: {
              fontSize: 12
            }
          }
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              // "2009年",
            ],
            axisLine: {
              lineStyle: {
                color: "#101d5d" //轴线的颜色
              }
            },
            axisLabel: {
              color: "#fff", //X轴名称颜色
              fontSize: 7,
              align: 'center'
            },
          }
        ],
        yAxis: [
          {
            // stack: '总量', //stack相同数据会相加
            show:false,
            type: "value",
            color: "#fff",
            nameTextStyle: {
              
              color: "#fff",
              fontSize: 10,
              verticalAlign: "middle"
            },
            splitLine: {
              lineStyle: {
                color: ["#101641"],
                type: "dashed"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#101d5d"
              }
            },
            axisLabel: {
              color: "#fff", 
              fontSize: "50%"
            },
            axisPointer:{
              show:false,
            }
          }
        ],
        legend: {
          show: false,
        },
        series:[
          // {
          //   name: "总数量",
          //   type: "line",
          //   symbol: "none", //去掉折线节点
          //   smooth: true, //曲线变平滑
          //   itemStyle: {
          //     color: "#0192fd"
          //   },
          //   lineStyle: {
          //     width: countSize(0.03)
          //   },
          //   areaStyle: {
          //     color: new this.$echarts.graphic.LinearGradient(
          //       0,0,0,1, //变化度 //三种由深及浅的颜色
          //       [
          //         {
          //           offset: 0.1,
          //           color: "rgba(8,21,99,1)"
          //         },
          //         {
          //           offset: 1,
          //           color: "rgba(0,0,0,.1)"
          //         }
          //       ]
          //     )
          //   },
          //   data: []
          // }
        ]
      },
    }
  },
  watch : {
    width(newVal, oldVal){
      this.curWidth = newVal;
      this.refreshEchart()
    },
    height(newVal, oldVal){
      this.curHeight = newVal;
      this.refreshEchart()
    },
    xAxisData(newVal, oldVal){
      this.option.xAxis[0].data = newVal;
      this.refreshEchart()
    },
    yAxisData:{
      handler(newVal,oldValue) {
        let newSeries = [];
        for(let item of newVal){
          let series = {
            name: item.name,
            type: "line",
            symbol: "none", //去掉折线节点
            smooth: true, //曲线变平滑
            itemStyle: {
              color: `rgb(${item.color})`
            },
            lineStyle: {
              width: countSize(0.03)
            },
            data: item.data
          }
          newSeries.push(series);
        }
        this.$set(this.option,'series',newSeries)
        this.refreshEchart()
      },
      deep: true
    }
  },
  mounted() {
    if(this.xAxisData.length){
      this.option.xAxis[0].data = this.xAxisData;
      let newSeries = [];
      for(let item of this.yAxisData){
        let series = {
          name: item.name,
          type: "line",
          symbol: "none", //去掉折线节点
          smooth: true, //曲线变平滑
          itemStyle: {
            color: `rgb(${item.color})`
          },
          lineStyle: {
            width: countSize(0.03)
          },
          data: item.data
        }
        newSeries.push(series);
      }
      this.$set(this.option,'series',newSeries)
      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>