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'
  }
},

版权声明:本文为Beam007原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。