echarts漸變色設置詳解

一、echarts設置漸變色

在echarts中，通過設置漸變色可以為圖表區域增加更加絢麗的顏色，讓圖表看起來更加美觀。在echarts中設置漸變色，我們可以通過以下方式來實現。

1、首先，我們需要在echarts中定義一個漸變色。

var colorList = [[0, '#00ff00'], [1, '#ff0000']];

2、然後，在我們的圖表中，在需要設置漸變色的地方，我們可以通過以下代碼來引用定義好的漸變色。

myChart.setOption({
    series: [{
        type: 'bar',
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    colorList
                )
            }
        },
        data: [10, 20, 30, 40]
    }]
});

通過以上代碼，我們可以輕鬆的為柱狀圖設置漸變色。

二、echarts背景色設置為漸變色

不僅可以為圖表設置漸變色，我們也可以為echarts整個區域的背景色設置為漸變色。為echarts背景設置漸變色，我們可以通過以下方式來實現。

1、首先，我們需要在echarts中定義一個漸變色。

var colorList = [[0, '#00ff00'], [1, '#ff0000']];

2、然後，在我們的圖表中，在option中加入以下代碼來將echarts背景色設置為漸變色。

myChart.setOption({
    backgroundColor: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: colorList
    },
    series: [{
        // 此處省略其他配置
    }]
});

通過以上代碼，我們可以將整個echarts區域的背景色設置為漸變色。

三、echarts柱狀圖漸變

除了整個圖表區域和背景色可以設置漸變色以外，我們也可以為柱狀圖的每個條目設置不同的漸變。

1、首先，我們需要定義好每個柱狀圖條目的漸變。

var itemStyles = [{
    // 第一條目的漸變
    normal: {
        color: new echarts.graphic.LinearGradient(
            0, 1, 0, 0,
            [{
                offset: 0,
                color: '#FF6D69'
            }, {
                offset: 1,
                color: '#FFC939'
            }]
        )
    }
}, {
    // 第二條目的漸變
    normal: {
        color: new echarts.graphic.LinearGradient(
            0, 1, 0, 0,
            [{
                offset: 0,
                color: '#42D9C8'
            }, {
                offset: 1,
                color: '#3687DC'
            }]
        )
    }
}];

2、然後，我們在series中的data中設置每個條目的itemStyle為我們先前定義好的itemStyles。

myChart.setOption({
    series: [{
        type: 'bar',
        data: [{
            name: '條目1',
            value: 100,
            itemStyle: itemStyles[0]
        }, {
            name: '條目2',
            value: 80,
            itemStyle: itemStyles[1]
        },{
            // 此處省略其他配置
        }]
    }]
});

通過以上代碼，我們可以為柱狀圖的每個條目設置不同的漸變，從而增強柱狀圖的視覺效果。

四、echarts漸變色

在echarts中，我們可以使用不同的漸變方式來設置漸變色，以下是echarts支持的漸變方式。

1、線性漸變

線性漸變是在兩個點之間進行的漸變色，我們可以通過以下代碼來定義一個線性漸變。

new echarts.graphic.LinearGradient(
    x0, y0, x1, y1,
    colorStops
)

其中，x0，y0和x1，y1定義兩個點的坐標，colorStops定義漸變的顏色和位置。

2、徑向漸變

徑向漸變是以一個圓為中心進行的漸變色，我們可以通過以下代碼來定義一個徑向漸變。

new echarts.graphic.RadialGradient(
    x, y, r,
    colorStops
)

其中，x和y定義圓心的坐標，r定義圓的半徑，colorStops定義漸變的顏色和位置。

3、三角漸變

三角漸變是從一個三角形的一側到另一側進行的漸變色，我們可以通過以下代碼來定義一個三角漸變。

new echarts.graphic.TriangleGradient(
    x0, y0, x1, y1, x2, y2,
    colorStops
)

其中，(x0, y0)、(x1, y1)、(x2, y2)定義三角形的三個頂點的坐標，colorStops定義漸變的顏色和位置。

五、echarts設置顏色

在echarts中，我們也可以直接設置顏色來為圖表增加不同的顏色，而不是使用漸變色。為echarts設置顏色，我們可以通過以下方式來實現。

1、首先，我們定義一個含有多個顏色的數組。

var colorList = ['#FF6D69', '#FFC939', '#42D9C8', '#3687DC'];

2、然後，在我們的圖表中，在需要設置顏色的地方，我們可以通過以下代碼將顏色傳入進去。

myChart.setOption({
    series: [{
        type: 'bar',
        itemStyle: {
            normal: {
                color: function(params) {
                    return colorList[params.dataIndex % colorList.length];
                }
            }
        },
        data: [10, 20, 30, 40]
    }]
});

通過以上代碼，我們可以輕鬆的為柱狀圖設置顏色。

六、echarts圖表漸變

除了單一的柱狀圖以外，我們還可以為其他的類型的圖表設置漸變色。

1、如下代碼為為折線圖設置漸變色：

var gradientColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
    offset: 0,
    color: 'red'
}, {
    offset: 0.5,
    color: 'orange'
}, {
    offset: 1,
    color: 'yellow'
}]);
myChart.setOption({
    series: [{
        type: 'line',
        smooth: true,
        lineStyle: {
            normal: {
                width: 3,
                color: gradientColor
            }
        },
        // 此處省略其他配置
    }]
})

2、如下代碼為餅圖設置漸變色：

myChart.setOption({
    backgroundColor: 'transparent',
    color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: '#FF6D69'
        }, {
            offset: 0.5,
            color: '#42D9C8'
        }, {
            offset: 1,
            color: '#3687DC'
        }]
    },
    series: [{
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        data: [{
            value: 10,
            name: '數據1'
        }, {
            value: 20,
            name: '數據2'
        }, {
            value: 30,
            name: '數據3'
        }],
        // 此處省略其他配置
    }]
});

通過以上代碼，我們可以為折線圖和餅圖設置漸變。

七、echarts儀錶盤漸變色

在echarts中，我們還可以為儀錶盤設置漸變色，以下是具體實現方式。

1、首先，我們定義儀錶盤的顏色。

var colorList = [[0.2, '#2980B9'], [0.8, '#2C3E50'], [1, '#E74C3C']];

2、然後，在我們的圖表中，我們可以通過以下代碼將顏色傳入儀錶盤中。

option = {
    series: [
        {
            type: 'gauge',
            detail: {
                formatter: '{value}%'
            },
            axisLine: {
                lineStyle: {
                    color: colorList,
                    width: 15,
                    shadowBlur: 0,
                    shadowColor: '#fff',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0
                }
            },
            // 此處省略其他配置
        }
    ]
};

通過以上代碼，我們可以輕鬆的為儀錶盤設置漸變色。