需要实现效果如下图:
双X轴思路,配置代码:
options: {
title: {
show: true,
text: "负载率区间统计",
textStyle: {
fontSize: "18",
// color: "#2d63e6",
fontWeight: "100"
}
},
grid: {
left: 50,
right: 40,
containLabel: false
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true
},
axisPointer: {
show: false,
type: "line"
},
boundaryGap: false,
axisLabel: {
formatter: "{value}%"
},
data: []
},
{
type: "category",
axisTick: {
show: false,
alignWithLabel: true
},
axisLine: { show: false },
axisLabel: {
show: false
},
axisPointer: {
show: true,
type: "shadow"
},
boundaryGap: false,
data: []
}
],
yAxis: {
type: "value",
splitLine: {
lineStyle: {
type: "dashed",
color: "#bcc3ca"
}
},
axisLabel: {
formatter: "{value}"
},
data: []
},
tooltip: {
trigger: "axis",
transitionDuration: 0,
position: "left",
formatter: function (params) {
//debugger;
let name = parseInt(params[0].name);
if (name % 10 == 0) {
return "";
} else {
return name - 5 + "% ~ " + (name + 5) + "% : " + parseInt(params[0].value) + " h";
}
}
},
color: ["#2D63E6"],
series: [
{
type: "bar",
xAxisIndex: 0,
data: []
},
{
type: "bar",
xAxisIndex: 1,
data: []
}
]
}