先说一下如何实现双y轴,echarts中有个控制y轴的属性叫yAxis,这个属性可以是对象也可以是数组。当我们只设置一个Y轴时,它为对象;当我们要设置多个Y轴时,它是个数组。所以我们要设置双y轴,它就需要为数组,看代码:
yAxis: [
{
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
}
},
{
type: 'value',
axisLabel: {
formatter: '{value}%' // 格式化标签
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}
],
我在使用双Y轴时遇到一个问题:右侧的Y轴标签不显示。
解决方法是在数据项里加上`yAxisIndex`属性,原因是多条Y轴时,Y轴有索引。
代码如下:
加个判断,标签名称中带`率`的数据项使用index为1的Y轴。
注意:`yAxisIndex`是在series属性的数据项里添加,不是在yAxis属性添加。
双Y轴时可以在其中一个yAxis里添加`splitLine:{show:false}`,即Y轴方向上只显示一条分隔线。