实现Echarts Y轴 间距不等分问题

1、图片示例

2、代码echarts的option

//数据1
const emailData = [12, 13, 10, 34, 90, 130, 210];
//数据2
const adsData = [2200, 3300,1241,11232, 2900, 3300, 11310];
//数据3
const ssData = [10000, 5,121,832, 40, 6233, 310];
//数据4
const si = [870];
//数据5
const shuju5 =  [820];
//x轴
const xzhou = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
//定义数据间隔
const dataInterval = [0, 200, 400, 600, 800, 850, 900];

const emailData2 = [];
for (var i = 0; i < emailData.length; i++) {
  //console.log(emailData[i])
  // 1.寻找在数据间隔里小于emailData的最大值
  const min_v = Math.max(...dataInterval.filter((v) => v <= emailData[i]));
  //console.log(emailData[i] + '-' + min_v);
  // 2.寻找在数据间隔里大于emailData的最小值
  const max_v = Math.min(...dataInterval.filter((v) => v > emailData[i]));
  //console.log(emailData[i] + '--' + max_v);
  //  3.寻找 min_v 所在的下标
  const index = dataInterval.findIndex((v) => v === min_v);
  //console.log(emailData[i] + '---' + index);
  //  4.计算该amount在y轴上应该展示的位置
  const y_value = ((emailData[i] - min_v) / (max_v - min_v)) * 10 + index * 10;
  //console.log(emailData[i] + '----' + y_value);
  emailData2[i] = y_value;
}
//console.log(emailData2);

const adsData2 = []
for (var i = 0; i < adsData.length; i++) {
  // 1.寻找在数据间隔里小于adsData的最大值
  const min_v = Math.max(...dataInterval.filter((v) => v <= adsData[i]));
  // 2.寻找在数据间隔里大于adsData的最小值
  const max_v = Math.min(...dataInterval.filter((v) => v > adsData[i]));
  //  3.寻找 min_v 所在的下标
  const index = dataInterval.findIndex((v) => v === min_v);
  //  4.计算该adsData在y轴上应该展示的位置
  const y_value = ((adsData[i] - min_v) / (max_v - min_v)) * 10 + index * 10;
  adsData2[i] = y_value;
}


const ssData2 = []
for (var i = 0; i < ssData.length; i++) {
  // 1.寻找在数据间隔里小于amount的最大值
  const min_v = Math.max(...dataInterval.filter((v) => v <= ssData[i]));
  // 2.寻找在数据间隔里大于amount的最小值
  const max_v = Math.min(...dataInterval.filter((v) => v > ssData[i]));
  //  3.寻找 min_v 所在的下标
  const index = dataInterval.findIndex((v) => v === min_v);
  //  4.计算该amount在y轴上应该展示的位置
  const y_value = ((ssData[i] - min_v) / (max_v - min_v)) * 10 + index * 10;
  ssData2[i] = y_value;
}

const si2 = []
for (var i = 0; i < si.length; i++) {
  // 1.寻找在数据间隔里小于amount的最大值
  const min_v = Math.max(...dataInterval.filter((v) => v <= si[i]));
  // 2.寻找在数据间隔里大于amount的最小值
  const max_v = Math.min(...dataInterval.filter((v) => v > si[i]));
  //  3.寻找 min_v 所在的下标
  const index = dataInterval.findIndex((v) => v === min_v);
  //  4.计算该amount在y轴上应该展示的位置
  const y_value = ((si[i] - min_v) / (max_v - min_v)) * 10 + index * 10;
  si2[i] = y_value;
}


const shuju52 = []
for (var i = 0; i < si.length; i++) {
  // 1.寻找在数据间隔里小于amount的最大值
  const min_v = Math.max(...dataInterval.filter((v) => v <= shuju5[i]));
  // 2.寻找在数据间隔里大于amount的最小值
  const max_v = Math.min(...dataInterval.filter((v) => v > shuju5[i]));
  //  3.寻找 min_v 所在的下标
  const index = dataInterval.findIndex((v) => v === min_v);
  //  4.计算该amount在y轴上应该展示的位置
  const y_value = ((shuju5[i] - min_v) / (max_v - min_v)) * 10 + index * 10;
  shuju52[i] = y_value;
}

option = {
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    },
    formatter: (v) => {
      //console.log(v[0].dataIndex)
      //界面显示原数值
      return `<div>
            <div>${xzhou[v[0].dataIndex]}</div>
            <div>Email：${emailData[v[0].dataIndex]}</div>
            <div>Union Ads：${adsData[v[0].dataIndex]}</div>
            <div>hello：${ssData[v[0].dataIndex]}</div>
            </div>`;
    }
  },
  legend: {
    data: ['Email', 'Union Ads','hello']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: xzhou
    }
  ],
   yAxis: {
    type: "value",
    // name: `单位:℃`,
    // max: 890,
    boundaryGap: false,
    splitLine: {
      lineStyle: {
        type: "dotted", //设置网格线类型 dotted：虚线 solid:实线
      },
    },
    axisLabel: {
        formatter: (v, i) => {
          if (i === 0) {
            v = '0';
          }
          if (i === 1) {
            v = '200';
          }
          if (i === 2) {
            v = '400';
          }
          if (i === 3) {
            v = '600';
          }
          if (i === 4) {
            v = '800';
          }
          if (i === 5) {
            v = '850';
          }
          if (i === 6) {
            v = '900';
          }

          return v;
        }
      }
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      emphasis: {              //隐藏其他数据
        focus: 'series'
      },
      data: emailData2
    },
    {
      name: 'Union Ads',
      type: 'line',
      emphasis: {
        focus: 'series'
      },
      data: adsData2
    },
    {
      name: 'hello',
      type: 'line',
      emphasis: {
        focus: 'series'
      },
      data: ssData2
    },
    // 上线值
    {
       name: 'hell2',
      type: "line",
      symbol: "none",
      color: "transparent",
      markLine: {
        symbol: "none",
        itemStyle: {
          normal: {
            lineStyle: {
              width: 2,
              type: "dotted", //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
            },
          },
        },
        //警示线标签
        data: [
          {
            name: "下限值",
            yAxis: si2[0],
            type: "max",
            label: {
              color: "#00C07D",
              position: "insideEndBottom",
              formatter: `上限值：${870}°c` + si2[0],
            },
            lineStyle: {
              type: "dotted",
              color: "#00C07D",
            },
          },
        ],
      },
    },
    // 下线值
    {
        type: "line",
        symbol: "none",
        color: "transparent",
        markLine: {
          symbol: "none",
          itemStyle: {
            normal: {
              lineStyle: {
                width: 2,
                type: "dotted", //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
              },
            },
          },
          //警示线标签
          data: [
            {
              name: "下限值",
              yAxis: shuju52[0],
              type: "max",
              label: {
                color: "red",
                position: "insideEndBottom",
                formatter: `下限值：${820}°c `  + shuju52[0],
              },
              lineStyle: {
                type: "dotted",
                color: "#00C07D",
              },
            },
          ],
        },
      }
  ]
};