1、前景：在echarts中设置多个Y轴的时候，如果不想Y轴的折线有交叉，则需要考虑一下这个方案：
每一条Y轴分为一个区域，使得每一个Y轴都是一个独立的区域，举个例子：四条Y轴，那就是每条Y轴占四分一。但是要怎么实现呢？
先看图：
实现前：折线之间是有交叉的2、实现后：每条折线之间分为区域去显示，毫无交集
3、实现的方法：利用echarts 官方提供的max和min函数，max、min为echart配置option的中的函数,_this是为了解决指向问题
let yAxisList = ['电流','电压','容量','温度'];let ySettingColorlist = ["#995055", "#55BFC0", "#639ADE", "#5EBE67"];let _this = this;let n=0;yAxisList.forEach((res, i) => {let datas = {type: "value",name: res, //设置Y轴单位position:yAxisList.length == 2? n < 1? "left": "right": n < 2? "left": "right", //判断Y轴的数量scale: true,offset:yAxisList.length == 2? 0: n > 1? parseInt((n - 2) * 50): parseInt(n * 50),axisLine: {show: true,lineStyle: {color: ySettingColorlist[n],},},splitLine: {show: true,},axisTick: {show: true,},max:function(value){let yAxisLists = ['电流','电压','容量','温度'];let lengs = yAxisLists .length;let maxs = Number(value.max);let mins = Number(value.min);if(i==0){// 3为3个区域/**第一条Y轴 */let valueNew = maxs>0?((maxs - mins)*3+maxs):(maxs*3+mins);return lengs==1?null: maxs==0?mins==0?4: (maxs - mins*3): _this.getFloat(valueNew,6);}else if(i==1){/**第二条Y轴 *///第二区域站4分2，也就是最大值需要占3分，最小值需要占一份//第二区域站4分2，也就是最大值需要占3分，最小值需要占一份let valueNew = maxs>0?((maxs - mins)*2+maxs):((maxs-mins)*2+maxs);return maxs==0?mins==0?3: (maxs - mins*2): _this.getFloat(valueNew,6);}else if(i==2){/**第三条Y轴 */let newView = (Number(value.min) - (Number(value.max) - Number(value.min))*2);return value.min == 0?value.max ==0?-2:_this.getFloat(newView,6):_this.getFloat(newView,6);}else {//第四条Y轴// let newValue = value.min - ((value.max-value.min)*lengs*(i+1))let newView = (Number(value.min) - (Number(value.max) - Number(value.min))*3);return value.min == 0?value.max ==0?-3:_this.getFloat(newView,6):_this.getFloat(newView,6);}},min:function(value){let yAxisLists = ['电流','电压','容量','温度'];let lengs = yAxisList.length;if(i==0){/**第一条Y轴 */return lengs==1?null: value.min == 0?0:_this.getFloat(value.min,6);}else if(i==1){/**第二条Y轴 */let newView = (Number(value.min) - (Number(value.max) - Number(value.min)));return value.min == 0?value.max ==0 ?-1:_this.getFloat(newView,6):_this.getFloat(newView,6);}else if(i==2){/**第三条Y轴 */let newView = (Number(value.min) - (Number(value.max) - Number(value.min))*2);return value.min == 0?value.max ==0?-2:_this.getFloat(newView,6):_this.getFloat(newView,6);}else {//第四条Y轴// let newValue = value.min - ((value.max-value.min)*lengs*(i+1))let newView = (Number(value.min) - (Number(value.max) - Number(value.min))*3);return value.min == 0?value.max ==0?-3:_this.getFloat(newView,6):_this.getFloat(newView,6);}},axisLabel: {interval: 0,},}option.yAxis.push(datas); //option 为echart的option配置//YMap["y" + (n + 1)] = n;// colorMap["y" + (n + 1)] = ySettingColorlist[n];n++;});
4、methods:
getFloat(num,n) {n = n ? parseInt(n) : 0;if(n <= 0) {return Math.round(num);}num = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); //四舍五入num = Number(num).toFixed(n); //补足位数return num;},
如果觉得《echarts 折线图多Y轴 每一条Y轴独属于一个区域 折线之间不交集。》对你有帮助，请点赞、收藏，并留下你的观点哦！
