怎麼給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下載，更多示例將會持續更新，歡迎關注。