echarts 直方图加正态_怎么给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下载，更多示例将会持续更新，欢迎关注。