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 * gapthis.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是用来限制可以显示的最大值，如果不限制最大值的话，会默认设置一个最大值，这样左右两轴的分隔线就对不齐了

Echarts双纵轴分隔线合并解决方案相关推荐
1. Echarts 双柱状图+折线图合并---实现效果详解(vue+Echarts实现)
  此文章讲解 Echarts 在 vue 开发中的使用方式以及实现效果的 demo 示例展示; 如有疑问或者不清楚的欢迎随时提问 . 废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验 ...
2. 实现ECharts双Y轴左右刻度线一致
  实现ECharts双Y轴左右刻度线一致原文链接:https://blog.csdn.net/qq_40845885/article/details/82108525 博主亲测可用哦,先上图: 这是未 ...
3. echarts双y轴实现（解决刻度线不对齐）
  echarts双y轴实现(解决刻度线不对齐) 解决办法:让两个坐标轴共用一个最大值,可以刻度保持一致. (即:拿到两数中最大的值作为共同的最大值). (第一次的方法) var maxa = Math. ...
4. 【echarts双y轴：左右轴数据分开设置最大值（解决刻度线不对齐】
  echarts双y轴数值差距太大(解决刻度线不对齐) 关键代码: min: 0,//最小值 max: set_max(maxb),//最大值 interval: set_max(maxb) / 5, ...
5. Echarts双Y轴，右侧Y轴标签不显示
  先说一下如何实现双y轴,echarts中有个控制y轴的属性叫yAxis,这个属性可以是对象也可以是数组.当我们只设置一个Y轴时,它为对象:当我们要设置多个Y轴时,它是个数组.所以我们要设置双y轴,它就 ...
6. easyui toolbar分隔线
  问题描述:EasyUI toolbar中添加分隔线时,分隔线会自动跑到最左边. 解决方案一: 使用一个table来创建toolbar <div id="toolbar"> ...
7. Echarts数据可视化series-line线图，开发全解+完美注释
  全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
8. matplotlib绘图归纳(双纵轴、柱状渐变、堆叠柱状)
  TIME:2022-04-25 最近毕业设计需要给我的仿真结果画图,想来以前用了这么久的matplotlib却一直没有归纳各种画图方法,在此进行归纳,方便以后参考,直接CV来用. 绘制双纵轴的折线图 ...
9. MATLAB画双纵轴曲线。
  MATLAB画双纵轴曲线. 原文地址:Matlab plotyy画双纵坐标图实例作者:gypsy Matlab plotyy画双纵坐标图实例 x = 0:0.01:20; y1 = 200*exp(- ...
最新文章
热门文章

Echarts双纵轴分隔线合并解决方案

Echarts 双纵轴分隔线合并解决方案

问题来源

Echarts双纵轴分隔线合并解决方案相关推荐

最新文章

热门文章