<template>
    <Echart
      ref="chart"
      :options="option"
      height="100%"
      width="100%"
    />
  </template>
  <script>
  /**
     * @author 王晓颖
     * @date 2020/08/19
     * @Description 折线面积图
     * @props 数据格式：{
     *    id: 'traffic_govern_line_id',
        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
        axisData: [
          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
        ]
      }
     *
     */
  import Echart from './../index'
  import { countSize } from '@/utils/index'
  export default {
    name: 'GradientLineChart',
    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: 10,
            right: 30,
            bottom: 5,
            top: 30,
            containLabel: true
          },
          legend: {
            orient: 'horizontal',
            data: [],
            align: 'left',
            right: '5%',
            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: this.axisLineColor // 轴线的颜色
                }
              },
              axisLabel: {
                color: this.fontColor, // 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: ['#101641'],
                  type: 'dashed'
                }
              },
              axisLine: {
                show:false,
                lineStyle: {
                  color: this.axisLineColor
                }
              },
              axisLabel: {
                color: this.fontColor,
                fontSize: 12
              }
            }
          ],
          series: []
        }
      }
    },
    watch: {
      xAxisData(newVal) {
        this.option.xAxis[0].data = newVal
        // this.refreshEchart()
      },
      legend(newVal) {
        this.option.legend[0].data = newVal
        // this.refreshEchart()
      },
      unit(newVal) {
        this.option.yAxis[0].name = newVal
        // this.refreshEchart()
      },
      seriesData: {
        handler(newVal) {
          const newSeries = []
          for (const item of newVal) {
            const series = {
              name: item.name,
              type: 'line',
              symbol: 'none', // 去掉折线节点
              smooth: this.smooth, // 曲线变平滑
              lineStyle: {
                width: 1
              },
              areaStyle: {
                opacity:0.5
              },
              data: item.data
            }
            newSeries.push(series)
          }
          this.$set(this.option, 'series', newSeries)
        //   this.refreshChart()
        },
        deep: true
      }
    },
    // mounted() {
    //   this.refreshChart()
    // },
    // methods: {
    //   refreshChart() {
    //     this.unit && (this.option.yAxis[0].name = this.unit)
    //     if (this.xAxisData.length) {
    //       this.option.legend.data = this.legend
    //       this.option.xAxis[0].data = this.xAxisData
    //       const newSeries = []
    //       for (const item of this.seriesData) {
    //         const series = {
    //           name: item.name,
    //           type: 'line',
    //           symbol: 'none', // 去掉折线节点
    //           smooth: this.smooth, // 曲线变平滑
    //           itemStyle: {
    //             color: `rgb(${item.color})`
    //           },
    //           lineStyle: {
    //             width: 1
    //           },
    //           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)
    //     }
    //   }
    // }
  }
  </script>
  
  <style scoped>
  </style>