<template>
  <div ref="chart" class="line-chart-container"></div>
</template>

<script>
import { echartMixin } from '@/mixins'
import * as echarts from 'echarts'
export default {
  name: 'LineChart',
  mixins: [echartMixin],
  data() {
    return {
      seriesData: []
    }
  },
  methods: {
    initChart() {
      const option = {
        backgroundColor: 'transparent',
        color: ['#4183D1'],
        grid: {
          left: 16,
          right: 16,
          top: 8,
          bottom: 8,
          containLabel: true
        },
        xAxis: [{ type: 'category', boundaryGap: false, data: ['08/21', '08/22', '08/23', '08/24', '08/25'] }],
        yAxis: [{ type: 'value', splitLine: { show: false } }],
        series: [
          {
            name: '趋势分析',
            type: 'line',
            smooth: true,
            lineStyle: { width: 1 },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: 'rgba(65,130,208,0.25)' },
                { offset: 0, color: 'rgba(65,130,208,1)' }
              ])
            },
            data: [20, 15, 30, 40, 20, 30, 10]
          }
        ]
      }
      this.chartObj.setOption(option)
    }
  }
}
</script>
<style lang="scss">
.line-chart-container {
}
</style>
