使用echarts绘制出同一维度下颜色不同、有参照背景的柱状图
echarts柱状图中没有控制相同维度的柱体颜色变化的参数,也没有给柱体加背景的参数。
效果如下:
下面的设置可以实现上面的需求:
let colorList = ['#FE8304', '#4FD320', '#2168D2', '#2BC3CB', '#12DDEA','#EAD715'];
series : [ { name:'成绩', type:'bar', itemStyle: { normal: { color: function(params) { return colorList[params.dataIndex] }, } }, label:{ normal:{ show: true, position: 'inside', color: '#fff', fontSize: 18, fontWeight: 700 } }, data:[70,80,50,90,100] }, { name: '背景', type: 'bar', xAxisIndex: 1, data: [100, 100, 100, 100, 100,], itemStyle: { normal: { color: 'rgba(102, 102, 102,0.5)' } }, zlevel: -1 }, ]