echarts 实现一个时间折线图 排序

实现的效果如下：

交互：点击右侧图例展示曲线，双击曲线展示曲线的信息

接口返回的信息如下：

每个折线是按照key,value的形式返回的数据，横坐标返回的是时间点，并且没有排序

关键函数如下，刷新图表的函数如下

//刷新数据
refreshCurve(data, hasCurve) {
  //表示展示折线
  this.hasEchartsCurve = hasCurve;
  //之前的数据还没销毁，先销毁 ，配置清空
  if (echartsCurve2) {
    echartsCurve2.dispose();
    echartsCurve2 = null;
    this.resetLineOption()
  }
  //重新回去数据
  echartsCurve2 = Echarts5.init(document.getElementById("echarts-curve"));
  this.resetLineOption()
  // 接口给的是{} 形式
  let entries = Object.entries(data);
  lineOption.legend.data = Object.keys(data)
  // selected: {'名字'：true] 形式操作图例的选中状态 一次只展示2条
  let map = {}
  entries.forEach((item, index) => {
    map[item[0]] = index < 2 ? true : false
  })
  lineOption.legend.selected = map
  //获取所有时间的数组
  let allTime = []
  //组装entrites
  entries.forEach(item => {
    const obj = {
      name: item[0],
      type: 'line',
      data: [...item[1].sort((a,b)=>{
        return (new Date(b.time)).getTime() - (new Date(a.time)).getTime()
      }).map((content) => {
        //时间去重
        if (allTime.indexOf(content.time) === -1) {
          allTime.push(content.time)
        }
        if(content.result&&content.time){
          return [content.time, content.result]
        }else{
          return [content.time, 0]
        }
      })],
      smooth: true,
      symbolSize: 8,
      info: item[1]
    }
    lineOption.series.push(obj)
  })
  lineOption.xAxis.data = this.findMaxAndMinTime(allTime)
  echartsCurve2.setOption(lineOption)
  //一进来底下的页面显示默认值
  this.clickInfo = lineOption.series[0].info.map((item) => {
    return {
      ...item,
      inspectPointName: lineOption.series[0].info.name,
      brief: item.brief ? JSON.parse(item.brief) : "",
    };
  });

  //线上点双击
  echartsCurve2.on("dblclick", (e) => {
    this.clickInfo = lineOption.series[e.seriesIndex].info.map(
        (item) => {
          return {
            ...item,
            inspectPointName:
            lineOption.series[e.seriesIndex].name,
            brief: item.brief ? JSON.parse(item.brief) : "",
          };
        }
    );
  });
  //线上双击
  echartsCurve2.getZr().on("dblclick", (params) => {
    const {topTarget} = params;
    const axs = topTarget?.parent?.parent?.__ecComponentInfo?.index;
    if (axs !== undefined) {
      this.clickInfo = lineOption.series[axs].info.map((item) => {
        return {
          ...item,
          inspectPointName: lineOption.series[axs].name,
          brief: item.brief ? JSON.parse(item.brief) : "",
        };
      });
    }
  });
  //曲线自适应
  this.resizeHandler = common.debounce(() => {
    if (echartsCurve2) {
      echartsCurve2.resize();
    }
  }, 100);
  window.addEventListener("resize", this.resizeHandler);
},