如何為echarts設置炫酷的柱狀圖顏色

一、 echarts簡介

Echarts是百度開源的一個數據可視化 JS 庫，可以用於網站或者大屏展示等多種場景中，使用 Echarts 可以方便快捷的製作出各種酷炫的可視化圖表。

Echarts 提供了多種類型的圖表，比如折線圖、柱狀圖、餅狀圖、地圖等，因此可以滿足不同場景的數據展示需求，但沒有炫酷的UI可能會讓讀者對圖表產生疲勞感，那麼如何為echarts設置炫酷的柱狀圖顏色呢？

二、 echarts設置柱狀圖顏色的方法

1. 單色漸變

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLine: {show: false},
        axisTick: {show: false},
        axisLabel: {
            textStyle: {
                color: '#ffffff',//x坐標軸文字顏色
                fontSize: 14
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {show: false},
        axisTick: {show: false},
        axisLabel: {
            textStyle: {
                color: '#ffffff',//y坐標軸文字顏色
                fontSize: 14
            }
        },
        splitLine: {
            show: true,
            lineStyle:{
                color: ['#f7f7f7']//y坐標軸分割線顏色
            }
        }
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',
        barWidth: 40,
        barGap: '10%',
        itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#029FBE'},//漸變色起點
                  {offset: 1, color: '#028090'}//漸變色終點
                ]
              ),
              barBorderRadius: [10, 10, 0, 0]//柱狀圖圓角
            }
        }
    }]
};

上述代碼中，使用了echarts中的graphic.LinearGradient進行單色漸變。其中offset是顏色的位置比例，color是顏色值。barBorderRadius設置圖形圓角。

2. 多色漸變

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLine: {show: false},
        axisTick: {show: false},
        axisLabel: {
            textStyle: {
                color: '#ffffff',
                fontSize: 14
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {show: false},
        axisTick: {show: false},
        axisLabel: {
            textStyle: {
                color: '#ffffff',
                fontSize: 14
            }
        },
        splitLine: {
            show: true,
            lineStyle:{
                color: ['#f7f7f7']
            }
        }
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',
        barWidth: 40,
        barGap: '10%',
        itemStyle: {
            normal: {
                color: function(params) {
                    var colorList = [
                        new echarts.graphic.LinearGradient(
                            0, 1, 0, 0,
                            [
                                {offset: 0, color: '#66B4DA'},
                                {offset: 1, color: '#05C3F9'}
                            ]
                        ),
                        new echarts.graphic.LinearGradient(
                            0, 1, 0, 0,
                            [
                                {offset: 0, color: '#66B4DA'},
                                {offset: 1, color: '#7EB7B1'}
                            ]
                        ),
                        new echarts.graphic.LinearGradient(
                            0, 1, 0, 0,
                            [
                                {offset: 0, color: '#7EB7B1'},
                                {offset: 1, color: '#AE9C9B'}
                            ]
                        ),
                        new echarts.graphic.LinearGradient(
                            0, 1, 0, 0,
                            [
                                {offset: 0, color: '#AE9C9B'},
                                {offset: 1, color: '#FFBA57'}
                            ]
                        ),
                        new echarts.graphic.LinearGradient(
                            0, 1, 0, 0,
                            [
                                {offset: 0, color: '#FFBA57'},
                                {offset: 1, color: '#E86567'}
                            ]
                        )
                    ];
                    return colorList[params.dataIndex]
                },
                barBorderRadius: [10, 10, 0, 0]
            }
        }
    }]
};

上述代碼中，使用了echarts中的graphic.LinearGradient進行多色漸變。其中color是顏色數組，params.dataIndex是數據索引。barBorderRadius設置圖形圓角。

3. 圖片填充

使用圖片填充柱狀圖背景色需要用到新版本的echarts，新版本的echarts使用了CanvasRenderer，可以對圖形進行更細緻的控制。

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLine: {show: false},
        axisTick: {show: false},
        axisLabel: {
            textStyle: {
                color: '#ffffff',
                fontSize: 14
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {show: false},
        axisTick: {show: false},
        axisLabel: {
            textStyle: {
                color: '#ffffff',
                fontSize: 14
            }
        },
        splitLine: {
            show: true,
            lineStyle:{
                color: ['#f7f7f7']
            }
        }
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',
        barWidth: 40,
        barGap: '10%',
        itemStyle: {
            normal: {
                color: {
                    image: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0, [{
                            offset: 0,
                            color: '#4088FD'
                        }, {
                            offset: 1,
                            color: '#F0FBFF'
                        }]
                    ),
                    repeat: 'repeat'
                }
            }
        }
    }]
};

上述代碼中，使用了echarts中的graphic.LinearGradient進行圖片填充。其中image是圖片地址，repeat是重複方式。

三、 總結

本文介紹了如何為echarts設置炫酷的柱狀圖顏色，分別介紹了單色漸變、多色漸變和圖片填充的方法。在實際使用echarts進行數據可視化的過程中，需要根據實際需求選擇合適的方法，使得圖表更加飽滿、生動、有意義。