怎么给ECharts柱状图加背景

效果图

解决方案

可以画两个 x 轴的坐标系。画多个 x 轴，要用到属性 xAxisIndex（使用 x 轴的 index）。

代码实现

var options = {
  xAxis: [{ type: "category", data: ["apple", "orange", "banana"] },
    {type: "category", data: ["apple", "orange", "banana"] },
  ],
  yAxis: {},
  series: [
    {
      type: "bar",
      barWidth: 12,
      xAxisIndex: 0,
      data: [143, 185, 193],
    },
    {
      type: "bar",
      barWidth: 12,
      xAxisIndex: 0,
      data: [90, 180, 300],
    },
    {
      type: "bar",
      barWidth: 12,
      xAxisIndex: 0,
      data: [186, 65, 450],
    },
    {
      // 背景
      type: "bar",
      barCategoryGap: "60%",
      xAxisIndex: 1,
      data: [500, 500, 500],
      itemStyle: {normal: { color: "rgba(0, 0, 0, 0.05)" },
      },
    },
  ],
};

var dom = document.getElementById("demo");
var myChart = echarts.init(dom);
myChart.setOption(options);

示例代码下载

可以复制以上代码运行查看使用效果，也可以到 GitHub: https://github.com/Jackyyans/code123 下载，更多示例将会持续更新，欢迎关注。