How can i use linearGradient about v-charts HOT 8 CLOSED

<template>
  <div>
    <ve-line :data="chartData" :colors="chartColor"></ve-line>
  </div>
</template>
<script>
import VeLine from 'v-charts/lib/line'
import echarts from 'echarts/lib/echarts'
export default {
  data () {
    this.chartColor = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#5bcee2' }, { offset: 1, color: '#045d69' }])]
    return {
      chartData: {
        columns: ['日期', '余额', '比率'],
        rows: [
          { '日期': '1月1日', '余额': 123, '比率': 0.3 },
          { '日期': '1月2日', '余额': 1223, '比率': 0.6 }
        ]
      }
    }
  },
  components: { VeLine }
}
</script>

<template>
  <div>
    <ve-line
      :data="chartData"
      :settings="chartSettings"
      :after-config="afterConfig">
    </ve-line>
  </div>
</template>
<script>
import VeLine from 'v-charts/lib/line'
import echarts from 'echarts/lib/echarts'
export default {
  data () {
    return {
      chartData: {
        columns: ['日期', '余额', '比率'],
        rows: [
          { '日期': '1月1日', '余额': 123, '比率': 0.3 },
          { '日期': '1月2日', '余额': 1223, '比率': 0.6 }
        ]
      },
      chartSettings: {
        area: true
      }
    }
  },
  methods: {
    afterConfig (options) {
      options.series[0].areaStyle = {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgb(255, 158, 68)'
          }, {
            offset: 1,
            color: 'rgb(255, 70, 131)'
          }])
        }
      }
      return options
    }
  },
  components: { VeLine }
}
</script>

<ve-line
  width="100%"
  :data="chartData"
  :settings="chartSettings"
  :after-config="afterConfig">
</ve-line>