怎么给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下载，更多示例将会持续更新，欢迎关注。