v-charts折线图多条折线面积图渐变色

官网链接

需要配置colors属性！！！！

import * as echarts from 'echarts';

Vue.prototype.$echarts  = echarts;

<template>
  <ve-line :data="chartData" :colors="colors" :settings="chartSettings"></ve-line>
</template>

colors = [
     new this.$echarts.graphic.LinearGradient(0,0,0,1,[{
         offset: 0, color: '#5B8FF9'
     },{
         offset: 1, color: '#FFFFFF'
     }]),
     new this.$echarts.graphic.LinearGradient(0,0,0,1,[{
         offset: 0, color: '#5AD8A6'
     },{
         offset: 1, color: '#FFFFFF'
     }]),
 ];

如果是颜色可以一样的话，也可以在chartSettings里配置

// 上面的colors不用echarts.graphic 用下面这种color写法也可以

chartSettings = {
    area: true,//是否显示为面积图
    stack: {
        '访问': ['pv', 'uv']
    },
    itemStyle: { //面积图颜色设置
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
                {
                    offset: 0,
                    color: '#5B8FF9', // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#FFFFFF', // 100% 处的颜色
                },
            ],
            globalCoord: false // 缺省为 false
        },
    },
}