<template>
  <v-chart
    style="width:100%;height:100%"
    :auto-resize="true"
    :options="option"/>
</template>
<script>
import echarts from 'echarts'
export default {
  data () {
    let xData = []
    let data = []
    for (let i = 1; i < 31; i++) {
      xData.push(i)
      let value = 100 + Math.floor(Math.random() * 400)
      data.push(value)
    }
    return {
      option: {
        color: ['#4F85FD', '#9B49FD', '#FE645F'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          top: 10,
          right: 20
        },
        grid: {
          top: 40,
          left: 20,
          right: 20,
          bottom: 20,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '销售走势',
            type: 'line',
            smooth: true,
            data: data,
            showSymbol: false,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(17,185,234,.2)'
                }, {
                  offset: 1,
                  color: '#fff'
                }])
              }
            }
          }
        ]
      }
    }
  },
  mounted () {
  }
}
</script>
