最近写项目的时候碰到的一个需求就是，y轴显示每个地点的某个特性，x轴需要表示各个地点之间相隔的不同距离。也就是x轴需要不等距显示，一般的图表x轴都等距显示，所以一下犯难了，不知道怎么实现，技术拙劣的我一度以为echarts是不支持这样的显示的。本来就直接想怼产品，我不会，我不行，搞不了。后来过了一段时间就有了灵感。

思路来源

echarts官网示例的可拖拽点案例，一看配置，xAxis不是类目轴，用的是value，然后series的data，每个数据点的格式是数组，index 0是x轴坐标，index 1是y轴坐标

let data = [
  [0, 100, '地点1'],
  [60, 120, '地点2'],
  [79, 116, '地点3'],
  [100, 66, '地点4'],
  [160, 80, '地点5'],
  [270, 86, '地点6'],
  [300, 86, '地点7']
];
option = {
  xAxis: {
    min: 0,
    max: 300,
    type: 'value',
    // 
    interval: 1,
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      show: true,
      formatter: (value) => {
        let arr = data.find((item) => item[0] == value) || [];
        console.log(arr[2]);
        return arr[2] ? arr[2] : '';
      },
      rotate: -45,
      showMinLabel: true,
      showMaxLabel: true
    }
  },
  yAxis: {
    type: 'value',
    axisTick: {
      show: false
    }
  },
  series: [
    {
      data: data,
      smooth: true,
      type: 'line'
    },
    {
      data: data.map((item) => {
        let arr = [...item];
        arr[1] = 200;
        return arr;
      }),
      type: 'bar',
      barWidth: 1,
      cursor:'auto',
      itemStyle: {
        normal: {
            color: '#eee'
          },
          emphasis: {
            color: '#eee'
          }
      },
      animation: false,
    }
  ]
};

改造

需要将xAxis改造成类目轴显示，想法就是在每个数据点数组中新增一个名字的元素项，这样x轴坐标和想要显示的名字可以一一对应，接下来通过axisLabel的formatter在x轴坐标相等时显示对应的名称即可，但是默认情况下不是每个数值都会显示label，这时将interval设置为1后，便会每隔一个数值都会显示label了，然后formatter就好了。因为上面设置interval为1，如果显示splitLine的话，就会每个数值都会显示一条竖线，现在的需求是有拐点的点放才让显示splitLine，但splitLine的interval只适用于类目轴。所以没办法用原有的splitline了，最后投机取巧，通过在每个数据点的地方设置一个到顶的柱子，也可以实现需要的效果。详细的阅读上面的代码就好了，不多逼逼了。

echarts x轴不等距

思路来源

改造