<template>
  <div :style="'height:' + height + '; width: ' + width" />
</template>

<script>
let echarts = require('echarts/lib/echarts')
// 引入折线图等组件
require('echarts/lib/chart/line')
// // 引入提示框和title组件，图例
require('echarts/lib/component/toolbox')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/grid')
require('echarts/lib/component/dataZoom')
require('echarts/lib/component/tooltip')
export default{
  name:'ChartLine',
  props:{
    width:{
      type:String,
      default:'100%'
    },
    height:{
      type:String,
      default:'400px'
    },
    chartData:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    //标题
    title:{
      type:String,
      default:''
    },
    titleSize:{
      type:Number,
      default:16
    },
    titleX:{
      type:String,
      default:'center'
    },
    titleY:{
      type:String,
      default:'3%'
    },
    titleShow:{
      type:Boolean,
      default:true
    },
    //图例相关
    legendShow:{
      type:Boolean,
      default:true
    },
    legendOrient:{
      type:String,
      default:'horizontal'
    },
    legendX:{
      type:String,
      default:'center'
    },
    legendY:{
      type:String,
      default:'bottom'
    },
    //工具栏相关
    toolboxShow:{
      type:Boolean,
      default:false
    },
    toolboxOrient:{
      type:String,
      default:'horizontal'
    },
    //提示框相关
    tooltipShow:{
      type:Boolean,
      default:true
    },
    tooltipTrigger:{
      type:String,
      default:"axis"
    },
    //区域缩放相关
    dataZoomType:{
      type:String,
      default:"inside"
    },
    //坐标轴相关
    xAxisShow:{
      type:Boolean,
      default:true
    },
    xAxisSplitLineShow:{
      type:Boolean,
      default:false
    },
    yAxisSplitLineShow:{
      type:Boolean,
      default:false
    },
    yAxisLineShow:{
      type:Boolean,
      default:false
    },
    //坐标系相关
    gridTop:{
      type:Number,
      default:10
    },
    gridLeft:{
      type:String,
      default:'5%'
    },
    gridRight:{
      type:String,
      default:'10%'
    },
    gridBottom:{
      type:Number,
      default:0
    },
    //单位相关
    xUnit:{
      type:String,
      default:''
    },
    yUnit:{
      type:String,
      default:''
    },
    //最值显示
    markPoint:{
      type:Boolean,
      default:false
    },
    xList:{
      type:Array,
      default:()=>{
        return []
      }
    }
  },
  data(){
    return{
      chart:null, //Echarts实例
    }
  },
  watch:{
    //监听到数据改变，重新加载echart数据
    chartData(val){
      this.removeChart('reset')
      this.initData()
    }
  },
  mounted(){
    this.init()
    this.initData()
  },
  methods:{
    //初始化
    init(){
      this.chart = echarts.init(this.$el)
      //监听页面大小改变
      window.addEventListener('resize', ()=>{
        if(this.chart){
          this.chart.resize()
        }
      })
    },
    //初始化数据
    initData(){
      if(!this.chart) return
      const obj = JSON.parse(JSON.stringify(this.chartData))
      const arr = []
      if(obj.dataList && obj.dataList.length) {
        obj.dataList.forEach((item, index) => {
          // 对echarts数据做处理
          item = {
            name: obj.nameList[index],
            data: item,
            type: 'line'
          }
          // 根据参数判断是否显示最值
          if (this.markPoint) {
            item.markPoint = {
              label: { show: true },
              data: [
                { type: 'max', name: '最大值', label: '最大值' },
                { type: 'min', name: '最小值', label: '最小值' }
              ]
            }
            item.markLine = {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          }
          arr.push(item)
        })
        obj.dataList = arr
        this.initChart(obj)
      }
    },
    //初始化echarts
    initChart(data){
      this.chart.setOption({
        color: ["#3398DB", "red"],
        title:{
          show:this.titleShow,
          text:this.title,
          left:this.titleX,
          top:this.titleY,
          textStyle:{
            fontSize:this.titleSize
          }
        },
        //图例设置
        legend:{
          show:this.legendShow,
          orient:this.legendOrient,
          left:this.legendX,
          top:this.legendY,
          data:data.nameList
        },
        //工具栏
        toolbox:{
          show:this.toolboxShow,
          orient:this.toolboxOrient,
          feature:{
            saveAsImage:{show:true},
            dataView:{show:true,readOnly:true}
          }
        },
        //提示框
        tooltip: {
          show:this.tooltipShow,
          trigger: this.tooltipTrigger,
          axisPointer: {
            type: "line",
            crossStyle: {
              color: "#333"
            },
            snap:true,
            axis:'x'
          },
        },
        //区域缩放
        dataZoom:[
          {
            type: this.dataZoomType
          }
        ],
        grid:{
          top:this.gridTop,
          left:this.gridLeft,
          right:this.gridRight,
          bottom:this.gridBottom,
          containLabel:true
        },
        xAxis:{
          show:this.xAxisShow,
          type:'category',
          name:this.xUnit,
          nameTextStyle:{
            fontSize:12
          },
          splitLine:{
            show:this.xAxisSplitLineShow,
          },
          boundaryGap:false,
          axisTick:{show:false}, //坐标轴刻度是否显示
          data:this.xList
        },
        yAxis:{
          type:'value',
          name:this.yUnit,
          splitNumber: 2,
          axisLine:{
            show:this.yAxisLineShow
          },
          splitLine:{
            show:this.yAxisSplitLineShow
          }
        },
        series:data.dataList
      })
    },
    //注销echarts
    removeChart(type){
      if(!this.chart) return
      this.chart.dispose() // 销毁echarts
      this.chart = null
      if(type === 'reset'){
        this.init()
      }
    }
  },
  beforeDestroy(){
    this.removeChart()
  }
}
</script>