Echarts 双纵轴分隔线合并解决方案
问题来源
因为右纵轴要限制最大值,所以导致了整个Echarts图的分隔线分裂开来
-
首先需要在 Echarts 中配置选项
yAxis: [ { type: 'value', name: '当日营收', axisLabel: { formatter: '{value} 元' }, max: null, // 最大订单数(null/undefined 来表示“自动计算最大值”) splitNumber: 6, // 刻度数(没用) interval: null // 限制分隔间隔 }, { type: 'value', name: '当日在线订单', axisLabel: { formatter: '{value} 条' }, max: null, // 最大订单数(null/undefined 来表示“自动计算最大值”) splitNumber: 6, // 刻度数(没用) interval: null // 限制分隔间隔 } ],
-
然后动态渲染Echarts
- 1、定义分隔段数
- 2、计算列表中的最大值
- 3、计算分隔数 = 最大值 / 分隔段数,再向上取整
- 4、重新计算最大值 = 分隔数 * 分隔段数
- 5、赋值渲染 Echarts
var maxLy = 0 // 最大当日营收金额 var maxRy = 0 // 最大订单条数 var gap = 6 // 分隔段数 var intervalLy = null // 当日营收金额分隔间隔数 var intervalRy = null // 订单条数分隔间隔数 res.data.forEach((item) => { if(maxLy < item.drys) { maxLy = item.drys } if(maxRy < item.jxz) { maxRy = item.jxz } }) // console.log(maxLy); // console.log(maxRy); // 如果大于6条则设置为null,否则设置为6 if(maxLy <= gap) { maxLy = gap } if(maxRy <= gap) { maxRy = gap } // 计算间隔数 = 当前最大值 / 分隔段数,再向上取整 intervalLy = Math.ceil(maxLy / gap) intervalRy = Math.ceil(maxRy / gap) // 计算左侧为间隔倍数的最大值 maxLy = intervalLy * gap // 计算右侧为间隔倍数的最大值 maxRy = intervalRy * gap this.option.yAxis[0].interval = intervalLy // 左纵轴间隔数赋值 this.option.yAxis[1].interval = intervalRy // 右纵轴间隔数赋值 this.option.yAxis[0].max = maxLy // 左纵轴最大值赋值 this.option.yAxis[1].max = maxRy // 渲染 Echarts this.myChart.setOption(this.option);
-
以上值缺一不可
-
最大值max是用来限制可以显示的最大值,如果不限制最大值的话,会默认设置一个最大值,这样左右两轴的分隔线就对不齐了😊
-
这里我没有限制最小值,而是让数据默认从最小的开始的,如果有需要,可以去设置最小值
-
效果图