echarts 折线图多Y轴，每一条Y轴独属于一个区域，折线之间不交集。

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;
    },