<template>
    <Echart
      ref="chart"
      :options="option"
      height="100%"
      width="100%"
    />
  </template>
  <script>
  import Echart from './../index'
  export default {
    name: 'lineChart',
    components: { Echart },
    props: {
      unit: { // 单位
        type: String,
        default: ''
      },
      colors: { // 颜色
        type: Array,
        default: () => { return ['#01b4ff', '#0337ff'] }
      },
      axisLineColor: { // 轴线颜色
        type: String,
        default: '#101d5d'
      },
      fontColor: { // 轴线上文字颜色
        type: String,
        default: '#000fff'
      },
      labelColor: { // 图形上文本标签颜色
        type: String,
        default: '#47c8b2'
      },
      smooth: {
        type: Boolean,
        default: true
      }, // 平滑
      seriesData: { // 数据
        type: Array,
        default: () => { return [] }
      },
      xAxisData: { // X轴数据
        type: Array,
        default: () => { return [] }
      },
      legend: { // 
        type: Array,
        default: () => { return [] }
      }
    },
    data() {
      return {
        curWidth: this.width,
        curHeight: this.height,
        option: {
          grid: {
            left: 30,
          right: 30,
          bottom: 30,
          top: 10,
          containLabel: true,
          },
          legend: {
            orient: 'horizontal',
            data: [],
            left:'center',
            top:'bottom',
            itemWidth: 12,
            itemHeight: 12,
            icon: 'rect',
            textStyle: {
              width: '300',
              color: '#000',
              fontSize: 12
            }
          },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: '16'
            },
            axisPointer: {
              type: 'line',
              label: {
                fontSize: '16'
              }
            }
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: true,
              data: [],
              axisLine: {
                lineStyle: {
                  color: '#000' // 轴线的颜色
                }
              },
              axisLabel: {
                color: '#000', // X轴名称颜色
                fontSize: 14
              },
              axisTick: {
                show:true,
                alignWithLabel:true
              }
            }
          ],
          yAxis: [
            {
              name: this.unit,
              type: 'value',
              color: '#000',
              nameTextStyle: {
                color: '#000',
                fontSize: 14,
                verticalAlign: 'middle'
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#D7D9E0'],
                  type: 'solid'
                }
              },
              axisLine: {
                show:false,
                lineStyle: {
                  color: '#000'
                }
              },
              axisLabel: {
                color: '#000',
                fontSize: 12
              }
            }
          ],
          series: []
        }
      }
    },
    watch: {
      xAxisData(newVal) {
        this.option.xAxis[0].data = newVal
      },
      legend(newVal) {
        this.option.legend.data = newVal
      },
      unit(newVal) {
        this.option.yAxis[0].name = newVal
      },
      seriesData: {
        handler(newVal) {
          const newSeries = []
          for (const item of newVal) {
            const series = {
              name: item.name,
              type: 'line',
              lineStyle: {
                width: 1
              },
              data: item.data,
              smooth:false, // 折线平滑
              symbol:'circle', // 控制折线处小点
            }
            newSeries.push(series)
          }
          this.$set(this.option, 'series', newSeries)
        },
        deep: true
      }
    },
  }
  </script>
  
  <style scoped>
  </style>