<template>
  <Echart
    ref="chart"
    :options="option"
    height="100%"
    width="100%"/>
</template>
<script>
/**
   * @author 王晓颖
   * @date 2021/07/21
   * @Description 折线图， 类目轴
   *
   */
import Echart from '~/common/echart'
import { countSize } from '~/utils/index'
export default {
  name: 'LineChart',
  components: {Echart},
  props: {
    unit: {
      type: String,
      default: ''
    }, // 单位，Y轴上显示文字
    tooltipOption:{
      type:Object,
      default:()=>{ return {
        fontSize:'16'
      }}
    },// 提示框配置项, 支持的配置包括文字大小
    xAxisOption:{
      type: Object,
      default: ()=>{
        return {
          axisLineColor: '#101d5d',
          fontColor:'#ffffff',
          fontSize:'14'
        }
      }
    }, // X坐标轴配置项,支持轴线颜色，文字大小，文字颜色
    yAxisOption:{
      type: Object,
      default:()=>{
        return {
          axisLineColor: '#101d5d',
          fontColor:'#ffffff',
          fontSize:'14'
        }
      }
    }, // Y坐标轴配置项,支持轴线颜色，文字大小，文字颜色
    labelColor: { // 图形上文本标签颜色
      type: String,
      default: '#47c8b2'
    }, // 数据块上方文字颜色
    smooth: {
      type: Boolean,
      default: true
    }, // 平滑
    gradient: {
      type: Boolean,
      default: true
    }, // 是否需要区域渐变
    legend: {
      type: Array,
      default: ()=>{
        return []
      }
    }, // 图例
    seriesData: { // 数据
      type: Array,
      default: () => { return [] }
    }, // 全部数据
    xAxisData: { // X轴数据
      type: Array,
      default: () => { return [] }
    } // x轴数据
  },
  data () {
    return {
      defaultXAxisOption:{
        axisLineColor: '#101d5d',
        fontColor:'#ffffff',
        fontSize:'14'
      }, // 默认X轴配置
      defaultYAxisOption:{
        axisLineColor: '#101d5d',
        fontColor:'#ffffff',
        fontSize:'14'
      }, // 默认Y轴配置
      option: {
        grid: {
          left: 10, // 距离容器四周距离
          right: 30,
          bottom: 5,
          top: 30,
          containLabel: true // grid区域是否包含坐标轴的刻度标签
        }, // 绘图网格
        legend: {
          orient: 'horizontal', // 图例列表布局朝向：水平
          data: [],
          align: 'left', // 图例标记和文本的对齐方式
          right: '5%', // 图例距右侧的距离
          itemWidth: 12, // 图例标记的图形宽度
          itemHeight: 12,
          icon: 'rect', // 图例标记形状
          textStyle: {
            width: '300',
            color: '#fff',
            fontSize: 12 // 图例文字的样式
          }
        }, // 图例配置
        tooltip: {
          trigger: 'axis', // 触发方式
          textStyle: {
            fontSize: this.tooltipOption.fontSize
          }, // 提示框文本样式
          axisPointer: {
            type: 'cross', // 十字指示器
            label: {
              fontSize: '16'
            }
          } // 坐标轴指示器配置
        }, // 提示框
        xAxis:[],
        yAxis:[],
        series: []
      }
    }
  },
  watch: {
    xAxisData () {
      this.refreshEchart()
    },
    legend () {
      this.refreshEchart()
    },
    unit () {
      this.refreshEchart()
    },
    tooltipOption(newVal){
      this.option.tooltip.textStyle.fontSize = newVal
      this.refreshEchart()
    },
    seriesData: {
      handler () {
      //   // let newSeries = []
      //   // for (let item of newVal) {
      //   //   let series = {
      //   //     name: item.name,
      //   //     type: 'line',
      //   //     symbol: 'none', // 去掉折线节点
      //   //     smooth: this.smooth, // 曲线平滑
      //   //     itemStyle: {
      //   //       color: `rgb(${item.color})`
      //   //     }, // 颜色
      //   //     lineStyle: {
      //   //       width: countSize(0.03)
      //   //     }, // 线宽度
      //   //     areaStyle: {
      //   //       color: new this.$echarts.graphic.LinearGradient(
      //   //         0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
      //   //         [
      //   //           {
      //   //             offset: 0.1,
      //   //             color: `rgba(${item.color},.6)`
      //   //           },
      //   //           {
      //   //             offset: 1,
      //   //             color: 'rgba(0,0,0,.0)'
      //   //           }
      //   //         ]
      //   //       )
      //   //     }, // 设置下方区域渐变
      //   //     data: item.data
      //   //   }
      //   //   newSeries.push(series)
      //   // }
      //   // this.$set(this.option, 'series', newSeries)
        this.refreshChart()
      },
      deep: true
    }
  },
  mounted () {
    this.refreshChart()
  },
  methods: {
    refreshChart () {
      // 当X轴和总数都有数据时继续
      if (this.xAxisData.length && this.seriesData.length) {
        // 图例
        this.option.legend.data = this.legend
        // X轴样式合并
        const xAxis = Object.assign(this.defaultXAxisOption, this.xAxisOption)
        this.option.xAxis = [
          {
            type: 'category', // 类别
            boundaryGap: false, // 坐标轴两遍的留白策略： 不留白
            data: this.xAxisData, // 类目名称列表，可以是指的列表，也可以是对象的列表，对象的value为类目名
            axisLine: {
              lineStyle: {
                color: xAxis.axisLineColor // 轴线的颜色
              }
            }, // 坐标轴线设置
            axisLabel: {
              color: xAxis.fontColor, // X轴名称颜色
              fontSize: xAxis.fontSize
            } // 坐标轴刻度标签设置
          }
        ]
        // Y轴样式合并
        const yAxis = Object.assign(this.defaultYAxisOption, this.yAxisOption)
        this.option.yAxis = [
          {
            name: this.unit, // Y轴名称：此处用于放单位
            type: 'value',  // 类型： 连续数值
            nameTextStyle: {
              color: yAxis.fontColor,
              fontSize: yAxis.fontSize,
              verticalAlign: 'middle'
            }, // 坐标轴名称的文字样式
            splitLine: {
              lineStyle: {
                color: ['#101641'], // 颜色，可以设置成多个颜色循环间隔
                type: 'dashed' // 虚线
              }
            }, // 坐标轴分隔线
            axisLine: {
              lineStyle: {
                color: yAxis.axisLineColor
              }
            }, // 轴线颜色
            axisLabel: {
              color: yAxis.fontColor,
              fontSize: yAxis.fontSize
            } // 刻度标签
          }
        ]
        let newSeries = []
        for (let item of this.seriesData) {
          const series = {
            name: item.name,
            type: 'line',
            symbol: 'none', // 去掉折线节点
            smooth: this.smooth, // 曲线变平滑
            itemStyle: {
              color: `rgb(${item.color})`
            },
            lineStyle: {
              width: countSize(0.03) //768屏幕下是1px
            },
            data: item.data
          }
          if(this.gradient) {
            series.areaStyle = {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
                [
                  {
                    offset: 0.1,
                    color: `rgba(${item.color},.6)`
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,0,0,.0)'
                  }
                ]
              )
            }
          }
          newSeries.push(series)
        }
        this.$set(this.option, 'series', newSeries)
      }
    }
  }
}
</script>

<style scoped>
</style>