Echarts 柱折混合图不重叠处理

主要问题

柱状和折线共同存在一个图表的时候，一般折线都会和柱状重叠在一起；普通情况下是没问题的，但当柱状和折线都要显示 label 的时候，交叠在一起看起来很混乱。

目标效果

将折线图和柱状图分上下两区放置

主要思路

设置 y 轴的最大值（max）和最小值（min）来划清两个图表的界限，设计折线图占 2/5、柱状图占 1/2，图示已推断并列出了柱状图和折线图的 max 和 min 的公式。

1. 获取两图表数据的最大值和最小值

 let maxBar = Math.max(
     //有多少组数据就比多少组
    ...barData1,
    ...barData2
)
//柱状都是从0开始因此不用计算minBar
let minBar = 0
let maxLine = Math.max(
    //有多少组数据就比多少组
    ...lineData1,
    ...lineData2
)
let minLine = Math.min(
    //有多少组数据就比多少组
    ...lineData1,
    ...lineData2
)

2. 计算 y 轴的 max 和 min 值

yAxis: [
    //柱状图
    {
        ...
        //=(max-柱状y轴min)/区域占比
        //=maxBar/(1/2)=maxBar*2
        max: maxBar * 2,
    },
    //折线图
    {
        //=max-(max-min)/区域占比
        //=maxLine-(maxLine-minLine)/(2/5)
        min: maxLine - (maxLine - minLine) / (2/5),
        //=max
        //=maxLine
        max: maxLine,
    },
],

3. 细节处理

到这一步，折柱就已经划清区域展示了，但是因为 y 轴最大最小值是自己计算出来的，显示上会不太美观，因此还需要用Math.ceil()和Math.floor()函数额外处理一下。

设置一个间隔值，套入公式，这样得出来的结果都是间隔值的倍数

max：Math.ceil(上一步计算的max值/interval)*interval
min：Math.floor(上一步计算的min值/interval)*interval

yAxis: [
    //柱状图
    {
        ...
        //间隔值450
        max: Math.ceil((maxBar * 2) / 450) * 450,
        interval: 450,
    },
    //折线图
    {
        //间隔值10
        max: Math.ceil(maxLine / 10) * 10,
        //这里的maxLine得代入计算好的y轴max（即Math.ceil(maxLine / 10) * 10）更准
        min:Math.floor((maxLine - (maxLine - minLine) / (2/5)) / 10) * 10,
    },
],