echarts 折线图动态多条曲线,每个拐点tooltip显示该点信息

749 阅读1分钟

拿到一个需求,折线图是多条折线的,每条折线图的x轴的点都不同,希望在该点近显示当前点的信息,而且不同的查询条件,生成的曲线个数是不同的,代码如下 image.png

        this.chart.on('mousemove', params => {
          moveParams = params
        })
        this.chart.on('mouseout', params => {
          moveParams = null
        })
        this.chart.setOption({
          tooltip: {
            trigger: 'axis',
            formatter: function(params) {
              if (!moveParams) {
                return
              }
              const moveIndex = moveParams.seriesIndex // 鼠标在哪儿条曲线上
              // 鼠标所在的线对应的对象
              const currentParams = params.find(item => item.seriesIndex === moveIndex)

              if (currentParams && currentParams.seriesName === moveParams.seriesName) {
                // 每条线的时间  moveIndex:线的下标
                const times = series[moveIndex].makeTime.split('T')
                return '工件编号:' + currentParams.seriesName + ('</br>') + 'X: ' + currentParams.data[0] + ('</br>') + 'Y: ' + currentParams.data[1] + ('</br>') + '日期: ' + times.join(' ')
              }
            }
          },
          color: ['#9f5bff', '#4bb8a9', '#f2bc5b', '#208ce3', '#f47f92'],
          dataZoom: [{
            type: 'inside'
          }, {
            type: 'slider'
          }, {
            type: 'slider',
            orient: 'vertical'
          }],
          grid: {
            top: '8%',
            left: '2%',
            right: '6%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLabel: axisLabelX
          },
          yAxis: {
            type: 'value',
            axisLabel: axisLabelY
          },
          series: series.map(element => {
            console.log(element, 'element')
            return {
              type: 'line',
              ...element
            }
          })
        }, true)
      })