Echarts使用柱状图实现横向数据展示，实现为每个柱子设置不同的颜色

这里使用echarts柱状图实现横向数据展示，同时给每个柱子设置不同的颜色，给柱子设置背景颜色等

话不多说直接上图吧
在这里插入图片描述
这里直接贴上代码：

option = {backgroundColor: "#1C162E", //背景颜色tooltip: {show: false},legend: {show: false},grid: {left: "2%", //图表距离左右上下之间的距离right: "2%",top: "6%",bottom: "1%",containLabel: true},//轴相关设置xAxis: {show: false,type: 'value',axisLine: {show: false,lineStyle: {color: "#ccc"}},axisTick: {alignWithLabel: false}},//Y轴相关设置yAxis: {type: 'category',data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],splitLine: {show: false,lineStyle: {color: "#6c7b8a14"}},axisLine: {show: false,lineStyle: {color: "#ccc"}},axisTick: {alignWithLabel: true},axisLabel: {interval: 0,show: true}},series: [//这个是作为背景的柱子{name: '2011',type: 'bar',itemStyle: {normal: {barBorderRadius: [0, 5, 5, 0],color: "rgba(49,44,65,1)"}},data: [1000, 1000, 1000, 1000, 1000, 1000],//数据取实际数据的最大值，这样设置出来的图形效果比较饱满barWidth: 14, //控制柱状图主子的宽度barGap: "-100%",animation: false,},//实际显示数据的柱子{name: '2012',type: 'bar',barWidth: 14, //控制柱状图主子的宽度itemStyle: {normal: {barBorderRadius: [0, 5, 5, 0],//设置圆角color: function(params) {//给每个柱子设置不同的颜色let colorList = ['#6BBAFF','#EA418B','#4048EF','#14D2B9','#F44E60','#5A7BEF'];return colorList[params.dataIndex]}}},label: {formatter: function(data) {let result = "";result += data.value + "个"; //data.name是字段名return result;},show: "true",position: "right",color: "#FFF",fontSize: "16"},data: [200, 300, 400, 500, 600, 700] //实际数据}]
};