echart 渐变内置生成器echarts.graphic.LinearGradient

最新推荐文章于 2024-10-29 16:44:12 发布

转载最新推荐文章于 2024-10-29 16:44:12 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_44897255/article/details/96877562

文章标签：

#echarts

echarts 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在ECharts中使用渐变色，包括使用内置的LinearGradient生成器来定制图表的颜色渐变效果。通过调整渐变色的起止位置和颜色渐变过程，可以实现丰富的视觉效果。

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

series: [{
                name: "2017",
                type: "bar",
                barWidth: 25,
                stack: "1",
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: colors[0].start
                            },
                            {
                                offset: 1,
                                color: colors[0].end
                            }
                        ]),
                    }
                },
                label: {
                    normal: {
                        show: false,
                    }
                },
                data: lastYearData,
                animationEasing: "elasticOut"
 }]

入了5个参数：

前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始.
第5个参数则是一个数组, 用于配置颜色的渐变过程. 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color表示颜色