详解echarts渐变色

发布时间：2023-05-17

一、设置渐变色

在echarts中，我们可以使用渐变色来美化数据图表。设置渐变色的方法如下：

option = {
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40],
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                )
            }
        }
    }]
};

上述代码中，我们在itemStyle中设置了normal下的color为一个LinearGradient。LinearGradient可以接收四个参数：渐变起点x坐标，渐变起点y坐标，渐变终点x坐标，渐变终点y坐标。同时，我们还在LinearGradient中传入了一个数组作为渐变的颜色值，数组中每一项是一个对象，包含了offset和color两个属性。offset代表渐变的位置，如上述代码中，offset为0代表从渐变起点0向终点1变化，颜色为#83bff6，offset为1代表从渐变起点0向终点1变化，颜色为#188df0。

二、渐变色失效

在设置渐变色时，存在一些问题可能导致渐变色失效。其中，最常见的有以下两种情况：

  1. 没有设置series中的颜色值为'none'。
option = {
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40],
        itemStyle: {
            normal: {
                color: 'none',
                borderColor: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                ),
                borderWidth: 2
            }
        }
    }]
};

上述代码中，我们在设置LinearGradient时，同时设置了borderColor和borderWidth。同时也将color值设置为了'none'。这样做的目的是让borderColor生效。 2. 没有在设置颜色时加上new关键字。

option = {
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40],
        itemStyle: {
            normal: {
                color: echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                )
            }
        }
    }]
};

上述代码中，我们在设置LinearGradient时，没有加上new关键字。这将导致渐变色失效，因此在设置LinearGradient时，请务必加上new关键字。

三、柱状图渐变

在echarts中，我们可以使用渐变色来美化柱状图。设置渐变色的方法如下：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#7FFFD4'},
                        {offset: 0.5, color: '#2E8B57'},
                        {offset: 1, color: '#228B22'},
                    ]
                )
            }
        }
    }]
};

上述代码中，我们设置了一个柱状图，并在其中加入了渐变色。设置渐变色的方法与前面介绍的一致。

四、图表渐变

在echarts中，除了柱状图之外，我们还可以给其他类型的图表设置渐变色。例如下面这个折线图：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: 'red'},
                    {offset: 0.5, color: 'blue'},
                    {offset: 1, color: 'green'},
                ]
            )
        }
    }]
};

上述代码中，我们设置了一个折线图，并在其中加入了渐变色。在实现渐变色时，我们将color属性改为了areaStyle属性。

五、设置颜色

在echarts中，我们有多种方法可以设置数据点的颜色。例如下面这个柱状图：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',
        itemStyle: {
            normal: {
                color: function(params) {
                    var colorList = [
                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                    ];
                    return colorList[params.dataIndex]
                }
            }
        }
    }]
};

上述代码中，我们使用函数来设置颜色。在函数中，我们定义了一个colorList数组，包含了16种不同的颜色。然后，我们在返回值中使用params.dataIndex来获取每个数据点的索引，再返回相应的颜色值。这种方法可以帮助我们动态设置颜色，避免颜色过于单一。

六、改颜色

在数据变化时，我们可能需要改变echarts中数据点的颜色。例如下面这个柱状图：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',
        itemStyle: {
            normal: {
                color: function(params) {
                    var colorList = [
                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                    ];
                    return colorList[params.dataIndex]
                }
            }
        }
    }]
};
// 数据变化，改变颜色
var myChart = echarts.init(document.getElementById('main'));
var currentIndex = -1;
setInterval(function() {
    var dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: currentIndex
    });
    currentIndex = (currentIndex + 1) % dataLen;
    // 高亮当前图形
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: currentIndex
    });
    // 显示 tooltip
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: currentIndex
    });
}, 1000);

上述代码中，我们设置了一个柱状图，并给每个数据点使用函数动态设置了颜色。然后，我们在数据变化时，使用setInterval定时器来改变echarts中数据点的颜色。具体实现方法是：使用echarts的dispatchAction方法来取消原来高亮的数据点，然后再高亮当前的数据点，并显示tooltip。这种方法可以让我们更加灵活地控制echarts中数据点的颜色。

推荐文章