echarts改变柱状图每个柱子的颜色

在实际使用ECharts时，我们常常需要使不同的数据用不的颜色来加以区分，那么我们该如何设置呢？

实例

我们以树懒课堂7月访问设备类型统计这一实例为例：

源代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
       var option = {
        title: {
            text: '树懒课堂7月访问设备类型统计'
        },
        xAxis: {
            data: ["苹果","小米","华为","其他"]  
        },
        yAxis: {
            splitLine:{ show:false}  //改设置不显示坐标区域内的y轴分割线
        },
        series: [{
                name: '手机品牌',
                type: 'bar',
                data: [19, 15, 40, 32],
                //设置柱子的宽度
                barWidth : 30,
                //配置样式
            }],
        　　　　　//控制边距　
            grid: {
                    left: '0%',
                    right:'10%',
                    containLabel: true,
            },
        };  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

效果如下图所示：

itemStyle

我们可以通过itemStyle的子属性来设置：
itemStyle的部分常用子属性及其功能如下：

series-bar. itemStyle

图形样式。

series-bar.itemStyle. color = 自适应

柱条的颜色。默认从全局调色盘 option.color 获取颜色

series-bar.itemStyle. borderColor = ‘#000’

柱条的描边颜色。

series-bar.itemStyle. borderWidth

柱条的描边宽度，默认不描边。

series-bar.itemStyle. borderType = ‘solid’

柱条的描边类型，默认为实线，支持 ‘dashed’, ‘dotted’。

series-bar.itemStyle. barBorderRadius

圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。如:

barBorderRadius: 5, // 统一设置四个角的圆角大小

barBorderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）

series-bar.itemStyle. shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
示例：

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series-bar.itemStyle. shadowColor

阴影颜色。支持的格式同color。

故我们可以通过修改series-bar.itemStyle. color这个属性来对柱子颜色进行设置。

使用函数

我们要设置的柱子有多个，我们可以写一个函数来完成设置。

修改完成后的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
       var option = {
        title: {
            text: '树懒课堂7月访问设备类型统计'
        },
        xAxis: {
            data: ["苹果","小米","华为","其他"]  
        },
        yAxis: {
            splitLine:{ show:false}  //改设置不显示坐标区域内的y轴分割线
        },
        series: [{
                name: '手机品牌',
                type: 'bar',
                data: [19, 15, 40, 32],
                //设置柱子的宽度
                barWidth : 30,
                //配置样式
                itemStyle: {   
                    //通常情况下：
                    normal:{  
        　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                        color: function (params){
                            var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
                            return colorList[params.dataIndex];
                        }
                    },
                    //鼠标悬停时：
                    emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
            }],
        　　　　　//控制边距　
            grid: {
                    left: '0%',
                    right:'10%',
                    containLabel: true,
            },
        };  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

效果如下图所示：