echarts实现多个y轴

1 问题描述在日常画图，如柱形图、折线图这些图表，需要两组或者两组以上不同的数据，且数据的大小有一定的差异时，通常是需要用两个y轴来体现的。2 算法描述若要更改y轴的个数，我们需要用到yA...

算法与编程之美

3442人浏览 · 2022-01-11 00:27:22

算法与编程之美 · 2022-01-11 00:27:22 发布

1 问题描述

在日常画图，如柱形图、折线图这些图表，需要两组或者两组以上不同的数据，且数据的大小有一定的差异时，通常是需要用两个y轴来体现的。

2 算法描述

若要更改y轴的个数，我们需要用到yAxisIndex，对其进行配置，而在这里的这个默认值为0，就是一条y轴，将yAxisIndex数值更改为1。

const trendChart= echarts.init(document.getElementById("trendChart"), "shine");
const trendChartOpt = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "none"
}

},
legend: {
left: "center",
bottom: 3,
itemWidth: 15,
itemHeight: 10,
textStyle: {
fontSize: 12,
color: "#b0c2f9"
},
data: ["月人流量"]
},
grid: {
top: 40,
bottom: 50,
left: 60,
right: 60
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {color: "#b0c2f9"} //x轴颜色
},
axisTick: {show: false},
axisLabel: {
fontSize: 12,
color: "#b0c2f9" //坐标颜色
}
},
yAxis: {
name: "人数(万人)",
type: "value",
splitNumber: 5,
maxInterval: 5,
minInterval: 5,
interval: 5,
axisLine: {
lineStyle: {color: "#b0c2f9"}
},
splitLine: {show: false},
axisTick: {color: "#b0c2f9"},
axisLabel: {
fontSize: 12,
color: "#b0c2f9"
}
},
visualMap: {
show: false,
seriesIndex: 2,
dimension: 0,
pieces: [{
lte: 9,
color: "rgba(176, 58, 91, 1)"
}, {
gt: 9,
lte: 11,
color: "rgba(176, 58, 91, 0.5)"
}]
},
series: [{
name: "月人流量",
type: "line",
yAxisIndex: 0 //默认为0，给定多个y轴时使用1

}]
};

3 结语

在使用echarts进行页面绘制时，可能会有因为一些较小的差异无法达到预想的效果，在制作页面之前，一定要充分了解其用法。