<template>
    <div :id="idstr" style="width:100%,height:2rem;"></div>
</template>

<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  data () {
    return {
      option: {},
      chart: null
    }
  },
  props: ['message', 'idstr'],
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      const vm = this
      // 基于准备好的dom，初始化echarts实例
      vm.chart = echarts.init(document.getElementById(vm.idstr))
      // 清空图表
      vm.chart.clear()
      vm.option = {
        xAxis: {
          type: 'category',
          data: vm.message.xAxis,
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          axisLabel: {
            interval: 0
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        grid: {
          top: '10%',
          left: '15%',
          bottom: '5%',
          width: '80%', // 图例宽度
          height: '80%' // 图例高度
        },
        series: [{
          data: vm.message.series,
          smooth: true, // 折线图平滑
          type: 'line',
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#30DDF4' },
                  { offset: 0.4, color: 'rgba(255,255,255,0.1)' },
                  { offset: 1, color: 'rgba(255,255,255,0)' }
                ]
              )
            }
          },
          itemStyle: { // 线条样式
            normal: {
              color: '#30DDF4',
              lineStyle: { // 系列级个性化折线样式
                width: 2,
                type: 'solid',
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#30DDF4'
                }, {
                  offset: 1,
                  color: '#E23AA2'
                }])// 线条渐变色
              }
            }
          }
        }]
      }
      vm.drawBar()
    },
    drawBar () {
      // 绘制图表
      const vm = this
      vm.chart.setOption(vm.option)
      vm.eventList()
    },
    eventList () {
      const vm = this
      vm.chart.on('click', function (params) {
      })
    }
  },
  watch: {
    message: {
      handler () {
        const vm = this
        setTimeout(function () {
          vm.drawLine()
        }, 0)
      },
      deep: true
    }
  }
}
</script>

<style lang="less">

</style>
