echarts折线图实现不等距轴

效果图

前置条件

• 数据值差距过大，某一系列的最大值远小于其他系列的最小值

核心思想

• 采用双Y轴图标，利润取Y2，其余取Y1
• 利润占据下面两行，其余占据上面三行
• 隐藏Y2，格式化Y1

具体操作

1、Y2

• 获取利润系列的最大值
• 计算利润一块区间的大小：利润item=利润Max/2
• 计算Y2最大值：Y2Max=利润item*5

2、Y1

• 获得其余各项的最大值(otherMax)和最小值(otherMin)
• 计算一块区间的大小：其他item=(otherMax-otherMin)/3
• 计算最小值：Y1Min=otherMin-2*其他item

3、隐藏Y2

4、格式化y1最下面两个的值

小提示

• Math.max() 最大值
• Math.min() 最小值
• Math.floor() 向下取整
• Math.ceil() 向上取整

配置代码

let option = {
	xAxis: {
		axisLine:{
        	onZeroAxisIndex:1,//X轴基于Y2的0刻度线
      	},
	},
	yAxis: [
		//Y1
      {
        type: "value",
        min: y1Min.value,
        max: y1Max.value,
        interval: otherItem.value,
       //格式化Y1下面两个的值，profitItem：利润item
        axisLabel: {
          formatter: function (value: number, index: number) {
            if (index < 3) {
              return index * profitItem.value;
            }
            return value;
          },
        },
      },
      //Y2
      {
        type: "value",
        show: false,
        min: y2Min.value,
        max: y2Max.value,
      },
    ],
    series:[
    	{
    		name:'利润总额',
    		type: "line",
    		yAxisIndex:1,//=取Y2
    	}
    ]
}

写在最后

教程不是很细，上班太累不想写了