Echarts内置渐变器：new echarts.graphic.LinearGradient(a,b,c,d,arr)

最新推荐文章于 2024-08-22 14:27:51 发布

慢慢の成长

最新推荐文章于 2024-08-22 14:27:51 发布

阅读量5.2k

点赞数 4

分类专栏：前端助手 echarts 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44537264/article/details/115666509

版权

前端助手同时被 2 个专栏收录

6 篇文章

订阅专栏

echarts

5 篇文章

订阅专栏

Echarts中实现渐变颜色并非直接通过color数组，而是使用`echarts.graphic.LinearGradient`方法，其中参数a、b、c、d分别代表渐变方向，如a和c控制左右，b和d控制上下。理解这些参数可以帮助更精确地定制颜色渐变效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts实现渐变颜色

在这里插入图片描述

如果给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, 用于表示位置
	     )]