当echart有两个Y轴时,会出现数据不同时,Y轴出现不对称分割的情况,如下图
而我们要实现的效果为:
双Y轴的时候,数据不一样也能实现等分切割线的样式
具体实现代码如下
//使用的是基于简单封装过的echart文件,因为
//在setOption,初始化绘制图表时,接收外部传入的option。基于这个option来自定义name
this.myChart.setOption(this.setgraphic(option))
setgraphic(obj){
if (Array.isArray(obj.yAxis)) {
obj.yAxis.forEach((res, index) => {
//有两条Y轴的时候才需要等分
if (obj.yAxis.length > 1) {
res.max = (val) => {
if (val.max) {
return this.formatNumber(val.max)
}
}
res.min = (val) => {
if (val.min) {
return val.min < 0 ? this.formatNumber(val.min) : 0
}
}
//适配用dataset的方式渲染数据
if (obj.hasOwnProperty('dataset')) {
this.sameKeyList(obj)
}
// 左侧的Y轴有着yAxisIndex为1而Y轴最多有两条
// index为0时,则为bar类型
let barData = obj.series.filter((e) => {
if (index == 0 ? !e.yAxisIndex : e.yAxisIndex) {
return e.data ? e.data : e.dataSeries
}
})
//处理成5等分
res.interval =
this.formatNumber(
Math.max(
...barData.map((item) =>
Math.max(...(item.data ? item.data : item.dataSeries))
)
)
) / 5
}
})
}
return obj
}
//找到离最大或者最小值最近的整数
formatNumber(num) {
num = Math.floor(num)
if (num > -10 && num < 10) {
return 10
} else {
const sign = num < 0 ? -1 : 1
const absNum = Math.abs(num)
const firstDigit = Number(String(absNum)[0])
return (
sign *
Number(`${firstDigit + 1}0${'0'.repeat(String(absNum).length - 2)}`)
)
}
},
sameKeyList(data) {
data.dataset.dimensions.forEach((e) => {
let arr = []
data.dataset.source.forEach((i) => {
arr.push(i[e])
})
let index = data.series.findIndex((item) => {
return item.name == e
})
if (index > -1) {
data.series[index].dataSeries = arr
}
})
// const keys = Object.keys(data.v);
},
处理的具体思路是为,先找到当前echart数据中的最大最小值,离最大或者最小值最近的整数位,最后进行等分