詳解echarts漸變色

一、設置漸變色

在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中數據點的顏色。