echarts 提示框组件tooltip调请求异步展示

需求

echarts折线图，点击某时间节点，需要调接口计算数值，进行展示。

效果

代码

import axios from 'axios'

const toHTML = (res) => {
  console.log(res.data.errorMessage, 123456)
  return res.data.errorMessage
}

tooltip: {
  trigger: 'axis',
  confine: true, // 将 tooltip 框限制在图表的区域内 防止超出div被遮盖
  triggerOn: 'click', // 点击时触发 以免频繁的调用接口
  formatter: function (params, ticket, callback) {
    axios.get('/api/后台接口', {
      params: {
        // 接口参数
      }
    }).then(res => {
      if (res.data.errorCode === 0) {
        // res.data.errorCode === 0返回正常，调用回调函数
        callback(ticket, toHTML(res))
      }
    }).catch(res => {
      console.log(res, 'get请求出错！')
    })
    return 'Loading'
  }
},