如何为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进行数据可视化的过程中，需要根据实际需求选择合适的方法，使得图表更加饱满、生动、有意义。