How can i use linearGradient

[Anehta]

like this :
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#5bcee2', }, { offset: 1, color: '#045d69', }]),

[xiguaxigua]

@Anehta What kind of scene do you need to use this or where you want to set this prop?

And I guess the following example may be helpful to you.🙂

<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>

[xiguaxigua]

Another example may be useful:

<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>

[Anehta]

Thank you for answering this question so seriously. And use this prop isn't normal？

[Anehta]

em....i encountered an bug
<div style="display: flex"> <ve-line :data="chartData"></ve-line> </div>
In this code , chart will be disappear. @xiguaxigua

[xiguaxigua]

Because the default width of V-Charts box is auto, and in your current scene, you need set width such as

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

[xiguaxigua]

This problem is caused by flex-basis, as you knew, If you don't set the flex-basis, flex-basis value will be the width, and flex: 0 0 auto is the same as flex: none. So, echarts can't get dom width and won't draw anything. @Anehta

[Anehta]

thhhk u bro. im a newbee....

[xiguaxigua]

You're welcome! Every question you meet can be asked here.