echarts实现多个y轴

Posted 2022-02-05 算法与编程之美

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