echarts内置的渐变色生成器

最新推荐文章于 2024-09-01 07:16:48 发布

懒洋洋懒羊羊

最新推荐文章于 2024-09-01 07:16:48 发布

阅读量1.4k

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_45827438/article/details/130749915

版权

Echarts提供了线性渐变(echarts.graphic.LinearGradient)和径向渐变(echarts.graphic.RadialGradient)两种方式来创建图形的渐变效果。线性渐变通过方位参数定义方向，而径向渐变则通过圆心坐标和半径设定。颜色渐变由多个颜色节点组成，每个节点包含offset和color，定义了颜色在渐变过程中的位置和色彩。

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

echarts内置的渐变色生成器

1.线性渐变echarts.graphic.LinearGradient

// 4个方位参数依次为右、下、左、上，
// 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
//下面代码从上面开始渐变
new echarts.graphic.RadialGradient(0, 0, 0, 1,[
                {
                  offset: 0,
                  color: 'rgba(255,255,255,0)',
                },
                {
                  offset: 0.89,
                  color: 'rgba(255,143,52,0.1)',
                },
                {
                  offset: 1,
                  color: 'rgba(255,129,26,0.22)',
                },
              ]),

2.径向渐变echarts.graphic.RadialGradient

//三个参数依次代表圆心x,y,半径
//数组配置渐变色
new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
                {
                  offset: 0,
                  color: 'rgba(255,255,255,0)',
                },
                {
                  offset: 0.89,
                  color: 'rgba(255,143,52,0.1)',
                },
                {
                  offset: 1,
                  color: 'rgba(255,129,26,0.22)',
                },
              ]),