echarts - 前端怎么实现如下所示的折线图？

Question

想要实现如下所示的听力图， 可以自定义图标的形状，可以点击添加点，还可以拖动已经绘制好的线。
想用echarts 实现。但是x y轴又不能和图中一样。
希望大佬们给点意见和解决方案

Answer 1

xy轴可以像下面一样进行设置，下面代码x轴刻度有一部分是使用的axisTick，通过设置长度达到的效果，如果长度不确定，可以通过api计算获取，或直接使用markLine进行模拟

option = {
  xAxis: {
    type: 'category',
    position: 'bottom',
    axisLine: {
      onZero: false,
      lineStyle: {
        color: '#00f'
      }
    },
    axisLabel: {
      color: '#333',
      formatter: function (value, index) {
        let k = value / 1000
        return k < 1 ? value : (k + 'k')
      }
    },
    data: [125, 250, 500, 1000, 2000, 4000, 8000],
    splitLine: {
      show: true,
      interval: function(index, value){
        return value >= 500
      }
    },
    axisTick: {
      alignWithLabel: true,
      length: 670,
      inside: true,
      lineStyle: {
        color: '#ccc'
      }
    }
  },
  yAxis: {
    min: -10,
    max: 125,
    interval: 10,
    inverse: true,
    axisLine: {
      show: true,
      lineStyle: {
        color: '#00f'
      }
    },
    axisLabel: {
      color: '#333',
      formatter: function (value, index) {
        return value > 120 ? '' : value;
      }
    },
  },
  series: [
    {
      data: ['', 40, 20, 30, 25],
      type: 'line'
    }
  ]
};

最后就是点的拖拽，可以参考可拖拽点

补充------