echarts 柱状图颜色设置

• 在使用echarts时，遇到一个问题，就是本来应该直接在color中设置的多个颜色不起作用，只显示第一个颜色

用demo中的代码举例：

option = { color: ['#c23531','#2f4554', '#61a0a8'], xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] }; 

对应显示的样式为：

这种情况下更改柱形图颜色的话，可以这样写：

option = { //这里就不重要了，可以删掉 color: ['#c23531','#2f4554', '#61a0a8'], xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130],

                  //设置柱的宽度，要是数据太少，柱子太宽不美观~
                    barWidth:70,

 type: 'bar', itemStyle: { normal: { 　　　　　　　　//这里是重点 color: function(params) { //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色 var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622']; return colorList[params.dataIndex] } } } }] }; 

如果希望自动循环已经有的颜色循环显示，可以添加一个判断：

 //给大于颜色数量的柱体添加循环颜色的判断 if (params.dataIndex >= colorList.length) { index = params.dataIndex - colorList.length; }

最终效果图：