echart折线图设置渐变色

最新推荐文章于 2024-09-05 14:13:07 发布

转载最新推荐文章于 2024-09-05 14:13:07 发布 · 5.7k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2440810/blog/3066067

文章标签：

#javascript #ViewUI

本文介绍了如何使用ECharts库来创建一个具有渐变颜色的折线图。通过设置itemStyle的color属性为LinearGradient对象，可以实现折线和区域填充的渐变效果。示例代码详细展示了如何配置x轴、y轴，以及定义数据和渐变颜色的具体步骤。

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name:'样例3',
                        type:'line',
                        itemStyle: {
                            color: '#6A5ACD',
                            normal: {
                                lineStyle: {        // 系列级个性化折线样式
                                    width: 2,
                                    type: 'solid',
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#0000FF'
                                    }, {
                                        offset: 1,
                                        color: '#CD5C5C'
                                    }]),//线条渐变色
                                }
                            },
                            emphasis: {
                                color: '#6A5ACD',
                                lineStyle: {        // 系列级个性化折线样式
                                    width: 2,
                                    type: 'dotted',
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#1E90FF'
                                    }, {
                                        offset: 1,
                                        color: '#0000FF'
                                    }])
                                }
                            }
                        },//线条样式
                        areaStyle:{
                            normal:{
                               //颜色渐变函数前四个参数分别表示四个位置依次为左、下、右、上
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

                                    offset: 0,
                                    color: 'rgba(80,141,255,0.39)'
                                }, {
                                    offset: .34,
                                    color: 'rgba(56,155,255,0.25)'
                                },{
                                    offset: 1,
                                    color: 'rgba(38,197,254,0.00)'
                                }])

                            }
                        },//区域颜色渐变
                        data:[450, 432, 401, 454, 590, 530, 110,242]

    }]
};