echart 使用min max做为坐标起始点

一般情况下，数据都是和X轴点,数据是点对点的显示，也有其他情况下，一个坐标轴下显示两条曲线，并且大家的为维度不是对应的点对点的数据，同时又指定了坐标轴的范围，以这个范围作为起始点

 

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var xMin = 0;
    var xMax = 2500;
    var seaHeight = 50;

    var waterDepthData = [
      [1, 10],
      [2, 10],
      [296, 10],
      [492, 10],
      [582, 10],
      [744, 10],
      [745, 10],
      [758, 10], ,
      [983, 10],
      [1978, 10],
      [1979, 10],
      [2159, 15],
      [2450, 15],
      [2451, 15],
      [2452, 15]
      [2500, 15]
    ];

    var buriedDepthData = [
      [1, 7],
      [51, 7],
      [68, 7],
      [70, 7],
      [84, 7],
      [91, 7],
      [92, 7],
      [323, 7],
      [615, 7],
      [748, 7],
      [750, 7],
      [756, 7],
      [955, 7],
      [1186, 7],
      [1189, 7],
      [1190, 7],
      [1609, 7],
      [1610, 7],
      [1876, 7],
      [1879, 7],
      [2481, 12],
      [2482, 12],
      [2500, 12]
    ];

    var seaLevelData = [
      [1, 50],
      [2, 50],
      [4, 50],
      [5, 50],
      [1045, 50],
      [1046, 50],
      [1048, 50],
      [1316, 50],
      [1495, 50],
      [1497, 50],
      [1555, 50],
      [1556, 50],
      [1748, 50],
      [1749, 50],
      [1750, 50],
      [1835, 50],
      [1869, 50],
      [1976, 50],
      [2034, 50],
      [2457, 50],
      [2499, 50],
      [2500, 50]
    ];

    var optionData = {
      "color": ["#2573b1", "#4dca72", "#fb0", "#35cacb", "#eb52fd", "#f1627b", "#965ee4", "#fc8452"],
      title: {
        text: 'X轴,起始点使用min+max作为坐标',
        left: "center",
        top: 5
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (data, ticket, callback) {
          var distance = data[0].axisValue + "<br/>";
          data.forEach(val => {
            if (val.seriesName !== '海平面') {
              distance += (val.marker + ' ' + val.seriesName + ":" + Math.abs(val.value[1] - seaHeight).toFixed(2) + '<br/>')
            }
          });
          return distance
        }
      },
      legend: {
        data: ['埋深', '水深'],
        top: 40,
        icon: "circle"
      },
      grid: {
        left: '1%',
        right: '60',
        bottom: 40,
        top: 80,
        containLabel: true
      },
      xAxis: {
        type: 'value',
        position: 'top',
        name: "位置(米)",
        min: Number(xMin),
        max: Number(xMax),
        splitLine: { show: true },
        data: [],
        axisLine: {
          onZero: false,
          show: false
        },
        boundaryGap: false,
      },
      yAxis: {
        name: "水深(米)",
        nameLocation: "start",
        axisLabel: {
          formatter: function (value, index) {
            return Math.abs(value - seaHeight);
          }
        },
        splitLine: { show: true },
        axisLine: {
          onZero: false,
          show: false
        },
      },
      dataZoom: [{
        type: "inside"
      }],
      series: [
        {
          name: '海平面',
          type: 'line',
          data: seaLevelData,
          symbol: "none",
          lineStyle: {
            width: 0
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#47e0dc'
            }, {
              offset: 1,
              color: '#affffc'
            }])
          },
        },
        {
          name: '埋深',
          type: 'line',
          // symbol: "none",
          showSymbol: false,
          data: buriedDepthData,
          lineStyle: {
            width: 4
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0.4, 0, 1, [{
              offset: 0,
              color: '#f3ead4'
            }, {
              offset: 1,
              color: '#e1a994'
            }])
          },
        },
        {
          name: '水深',
          type: 'line',
          // symbol: "none",
          showSymbol: false,
          data: waterDepthData,
          lineStyle: {
            width: 2
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0.4, 0, 1, [{
              offset: 0,
              color: '#ffead4'
            }, {
              offset: 1,
              color: '#e3a994'
            }])
          },
        }
      ]
    };

    // 清除之前所有,重置状态
    myChart.clear();

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(optionData);