Echarts颜色渐变的设置_echarts渐变颜色 undefined (reading 'lineargradient')-优快云博客

本文介绍如何使用ECharts实现线性渐变、径向渐变及纹理填充效果。详细解析了每种填充方式的参数配置，包括渐变方向、颜色变化等，并通过实例展示了在柱状图中的应用。

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

方法一

/****线性渐变，多用于折线柱形图，前四个参数分别是 x0, y0, x2, y2,

** 范围从 0 - 1，相当于在图形包围盒中的百分比，

** 如果 globalCoord 为 `true`，则该四个值是绝对的像素位置

****/

    color: {
        type: 'linear',
        x: 0,                 // 左上角x
        y: 0,                 // 左上角y
        x2: 0,                // 右下角x
        y2: 1,                // 右下角y
        colorStops: [{
            offset: 0, color: 'red' // 0% 处的颜色
        }, {
            offset: 1, color: 'blue' // 100% 处的颜色
        }],
        global: false // 缺省为 false
    }

    // 径向渐变，多用于圆圈状图，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
    color: {
        type: 'radial',
        x: 0.5,                  // 0.5为正中心，如果小于渐变中心靠左
        y: 0.5,                  // 0.5为正中心，如果小于渐变中心靠上
        r: 0.5,                  // 0.5渐变影响范围只有一半，影响圆心到周围的一半
        colorStops: [{
            offset: 0, color: 'red' // 0% 处的颜色
        }, {
            offset: 1, color: 'blue' // 100% 处的颜色
        }],
        global: false // 缺省为 false
    }

    // 纹理填充
    color: {
        image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串   
        repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
    }

方法二

// 线性渐变
        //单颜色渐变
            series: [{
                type: 'bar',
                data: yDataArr,
                itemStyle: {
                    color: {
                        type: 'linear', // 线性渐变
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'red' // 0%处的颜色为红色
                        }, {
                            offset: 1,
                            color: 'blue' // 100%处的颜色为蓝
                        }]
                    }
                }
            }]

        //多颜色渐变
            series: [{
                type: 'bar',
                data: yDataArr,
                itemStyle: {
                    normal: {
                        color: function(params) {
                            console.log(params);
                            return new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                    offset: 1,
                                    color: barTopColor[params.dataIndex]
                                }, {
                                    offset: 0,
                                    color: barBottomColor[params.dataIndex]
                                }]
                            );
                        },
                    },