Echart渐变色实现方法-中心渐变-优快云博客

本文介绍了两种在ECharts中实现渐变色的方法：一种是使用内置的graphic.LinearGradient实现线性渐变；另一种是使用ColorStep实现更复杂的中心渐变效果。文中详细解释了这两种方法的参数设置及其应用。

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

方法1: 利用echart内置的`graphic.LinearGradient` 来实现渐变

使用graphic.LinearGradient 的缺点：只能从一个方向开始渐变，不能实现中心渐变的效果。

前四个参数：0, 0, 0, 1, 依次对应右方/下方/左方/上方、四个方位，而0，0，0，1 表示从正上方开始。

第五个参数：数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置。

  splitArea: { 
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
                            offset: 0, color: '#333' // 0% 处的颜色
                        }, {
                            offset: 0.5, color: 'rgba(255, 255, 255, 0.1)' // 100% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(255, 255, 255, 0.1)' // 100% 处的颜色
                        }]),
              }, 
       },

方法2：使用ColorStep实现

优点：可以实现中心渐变的效果

线性渐变

前四个参数分别是x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 true，则该四个值是绝对的像素位置

 splitArea: { 
            areaStyle: { 
                color: {
                    type: 'linear ', // linear 线性渐变  radial径向渐变
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                    offset: 0, color: 'rgba(255,255,255,0.1)' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(86, 189, 255, 0.4)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            } 
        },

径向渐变

前三个参数分别是圆心 x, y和半径，取值同线性渐变, 当x,y 取值为0.5时，渐变效果从圆心开始渐变。

 splitArea: { 
            areaStyle: { 
                color: {
                    type: 'radial', // linear 线性渐变  radial径向渐变
                    x: 0.47,                  // 0.5为正中心，如果小于渐变中心靠左
                    y: 0.59,                  // 0.5为正中心，如果小于渐变中心靠上
                    r: 0.8,
                    colorStops: [{
                    offset: 0, color: 'rgba(255,255,255,0.1)' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(86, 189, 255, 0.4)' // 100% 处的颜色
                    }],
                }
            } 
        },