Echarts内置渐变器：new echarts.graphic.LinearGradient

在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient

如果给echarts图设置颜色，我们会在 option 中 传入 color 字段的一个数组

let option = {
    color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', 
        '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
}

对于颜色渐变的起始角度，还有渐变程度，并非直接用数字就可以直白表达出来的

color: [new echarts.graphic.LinearGradient(
             0, 0, 1, 0, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 
             1则代表渐变色从正上方开始
             [
                 {offset: 0, color: '#3977E6'},
                 {offset: 1, color: '#37BBF8'}
             ] // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是 
          0 ~ 1, 用于表示位置
         )]

a ,b,c,d为0，1
a:1 arr中的颜色右到左
c:1 arr中的颜色左到右
b:1 arr中的颜色下到上
d:1 arr中的颜色上到下

示例

itemStyle: {
    normal: {
        color: '#00E2FF',
        lineStyle: {
            // 系列级个性化折线样式
            width: 5,
            type: 'solid',
            // 颜色渐变函数 前四个参数分别表示四个位置依次为
            // 右下左上
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                    offset: 0,
                    color: '#00E2FF'
                },
                {
                    offset: 1,
                    color: '#0063BF'
                }
            ]) // 线条渐变色
        }
    },
    emphasis: {
        color: '#0063BF',
        lineStyle: {
            // 系列级个性化折线样式
            width: 5,
            type: 'dotted',
            color: '#4fd6d2' // 折线的颜色
        }
    }
}, // 线条样式
areaStyle: {
    normal: {
        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
                // 折线图颜色渐变
                offset: 0,
                color: 'rgba(0, 226, 255, 0.5)'
            },
            {
                offset: 1,
                color: 'rgba(0, 99, 191, 0)'
            }
        ])
    }
},