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] //实际数据
    }
  ]
};