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

关注

原创 2022-03-24 16:42:56 3.2k 阅读 AI 写同款· GEO 优化 ›

echarts散点图的心得注：因为工作需要，绘制了echart的几张图表，浅显的研究了官方的配置文件，将散点图、柱形图、跟南丁格图设计出来了。散点图只添加了两组数据，遇到的难点有两个。 [1]geoCoordMap对象的转换 [2]提示框的设计阅读详情

需求

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

收录于