echarts双y轴对齐
前提概要:之前写过计算方式,对一手数据进行计算得出间隔数,然后确定max,min,interval,但是一旦包含加上markline,stack,yAxisIndex等影响,就会很麻烦,而且数据正负值,0-1之内小数等实在计算太过麻烦,于是直接准备在echart自身计算出的间隔,最大值,最小值的基础上进行二次更新,应该适用于很多场景,不过不确定性能的影响
说明:先自行调initChart,然后再调用reDraw
initChart () {
// 这里按你的来
this.chart = this.$echarts.init(this.$refs.hcLineBarChart)
let option= {...}
this.chart.setOption(option, true)
// 如果有两个y轴
if (hasTwoY) { this.reDraw() }
},
// 保证双y轴对齐
reDraw() {
const option = this.chart.getOption()
const splitInfo = option.yAxis.reduce((pre, next, index) => {
// 在setOption之后,执行以下代码
// 获取y轴刻度最值
const y = this.chart.getModel().getComponent('yAxis', index).axis.scale._extent
// 当前y轴刻度最小值
const currentMin = y[0]
// 当前y轴刻度最大值
const currentMax = y[1]
// y轴间隔
const yInterVal = this.chart.getModel().getComponent('yAxis', index).axis.scale._interval
const distance = currentMax - currentMin
const splitNumber = (distance) / yInterVal
// 第一个y轴存在值
if (index === 0 && splitNumber !== 0) {
pre.splitNumber = splitNumber
// 第一个轴存在值,且第二个轴也存在值,且两个轴的分隔数不同
} else if (pre.splitNumber !== 0 && splitNumber !== 0 && splitNumber !== pre.splitNumber) {
// 需要修改第二个轴,然后进行重绘
pre.needRedraw = true
// 以第一个轴的间隔数为标准,对第二个轴添加修改
const maxNum = Math.ceil(splitNumber / pre.splitNumber) * yInterVal * pre.splitNumber
next.min = currentMin
next.max = maxNum currentMin
next.interval = Math.ceil(splitNumber / pre.splitNumber) * yInterVal
}
return pre
}, { splitNumber: 0, needRedraw: false })
// 需要重绘
if (splitInfo.needRedraw) {
this.chart.setOption(option, true)
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbebcc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01