echarts实现颜色线性渐变的其中两种方式

最新推荐文章于 2025-04-24 16:37:42 发布

Jaywei.online

最新推荐文章于 2025-04-24 16:37:42 发布

阅读量1.6k

点赞数

分类专栏： # ehcarts

本文链接：https://blog.youkuaiyun.com/qq_39225639/article/details/116173253

版权

ehcarts 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用Echarts内置的LinearGradient生成器创建渐变色，并对比了通过配置项实现的等效方法。两种方式都展示了如何为图表元素设置从 '#5052EE' 到 '#AB6EE5' 的颜色过渡。

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

一：使用echarts内置的渐变色生成器echarts.graphic.LinearGradient

color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0, color: '#5052EE'
                },
                {
                  offset: 1, color: '#AB6EE5'
                }])

二：使用配置项

color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0, color: '#5052EE'
                  },
                  {
                    offset: 1, color: '#AB6EE5'
                  }]
              }