Echarts雙Y軸刻度分割線對(duì)不齊問(wèn)題
一愕乎、問(wèn)題如圖所示
為了美觀必須要去掉一個(gè)Y軸的分割線既忆,然而去掉一條后數(shù)值跑偏對(duì)不上
二羡忘、 計(jì)算Y軸最大值,基于最大值均分
取出每一列最大值
在堆積圖表中需要取出每一個(gè)X軸對(duì)應(yīng)的多個(gè)series item的值,進(jìn)行累計(jì)得出當(dāng)前X軸最大值,最后取出所有X軸的最大值。如下圖:
var series = [{
yAxisIndex: 0,
name: '直接訪問(wèn)',
type: 'bar',
stack: '總量',
data: [2, 2, 2, 2, 2, 2, 11]
}, {
yAxisIndex: 0,
name: '直接訪問(wèn)2',
type: 'bar',
stack: '總量',
data: [2, 2, 2, 2, 2, 2, 17]
}, {
name: '轉(zhuǎn)化率',
type: 'line',
data: [90, 60, 80, 30, 15, 68, 77],
yAxisIndex: 1
}]
const Y1Series = [];
const Y2Series = [];
let Y2Max = 0;
let Y1Max = 0;
series.forEach((item) => {
if (item.yAxisIndex === 0) {
Y1Series.push(item.data)
} else {
Y2Series.push(item.data)
}
})
/*
此時(shí)
Y1Series = [[2, 2, 2, 2, 2, 2, 11],[2, 2, 2, 2, 2, 2, 17]]
Y1Series = [90, 60, 80, 30, 15, 68, 77]
*/
/*
params { array } [] => [[series.data],[series.data]],[series.data]]]
return number
*/
function getYaxisMax(seriesList) {
var res = [];
seriesList.forEach((item) => {
item.forEach((i, idx) => {
if (!res[idx]) {
if (isNaN(i / 1)) {
res[idx] = 0
} else {
res[idx] = i / 1
}
} else {
if (isNaN(i / 1)) {
res[idx] += 0
} else {
res[idx] += i / 1
}
}
})
});
return Math.max.apply(null, res)
}
Y1Max = getYaxisMax(Y1Series) // Y1軸最大值
Y2Max = getYaxisMax(Y2Series) // Y2軸最大值
如下圖所示
現(xiàn)在雖然2個(gè)Y周的刻度分割線一致了,但是新的問(wèn)題有來(lái)了
2條Y軸的刻度值期贫,和刻度間隔值。存在小數(shù)异袄,且間隔值并不是 5通砍,50,10烤蜕,100之類的數(shù)
三封孙、解決刻度間隔值問(wèn)題
// 刻度最大值
function yAxisMax(maxValue) {
if (isNaN(maxValue / 1) || maxValue / 1 < 10) {
return 10
}
const max = Math.ceil(maxValue) + '';
const itemValue = Math.ceil(max / 5) + '';
const mins = Math.ceil((itemValue / Math.pow(10, itemValue.length - 1)))
const item = mins * Math.pow(10, itemValue.length - 1) + '';
// item 需要是5的整數(shù)倍
const res = Math.ceil(item / 5) * 5 * 5;
return res
}