echarts 提示框异步获取数据 —— formatter 异步回调函数的使用

let that = this;
 

 // 提示框
        tooltip: {
          // 触发事件
          triggerOn: "click",
          backgroundColor: "transparent",
          formatter: function(params, ticket, callback) {
            that.$http({
                method: "get",
                url: "http://jsonplaceholder.typicode.com/users",
                params: {
                  // 1到10的随机整数
                  id: Math.ceil(Math.random() * 10) || 1,
                },
              })
              .then((res) => {
                let context = `${params.name}的负责人是${res.data[0].name}</p>`;
                callback(ticket, context);
              });

            return "数据查询中……";
          },
        },

<template>
  <div style="height: 100%;width: 100%" ref="myChart"></div>
</template>

<script>
import echarts from "echarts";
import "./chinaMapOutline.js";
import "./china.js";

export default {
  methods: {
    initEchartMap() {
      let myChart = echarts.init(this.$refs.myChart);

      let that = this;

      let options = {
        // 提示框
        tooltip: {
          // 触发事件
          triggerOn: "click",
          backgroundColor: "transparent",
          formatter: function(params, ticket, callback) {
            that.$http({
                method: "get",
                url: "http://jsonplaceholder.typicode.com/users",
                params: {
                  // 1到10的随机整数
                  id: Math.ceil(Math.random() * 10) || 1,
                },
              })
              .then((res) => {
                let context = `${params.name}的负责人是${res.data[0].name}</p>`;
                callback(ticket, context);
              });

            return "数据查询中……";
          },
        },
        series: [
          // 中国地图-外轮廓
          {
            type: "map",
            map: "chinaMapOutline",
            // 不响应鼠标交互
            silent: true,
            //调整以下3个配置项与页面地图重合
            aspectScale: 0.75, // 地图的长宽比
            center: [104.2, 35.9], //设置可见中心坐标，以此坐标来放大和缩小
            zoom: 1.13, //放大级别
            itemStyle: {
              normal: {
                // 地图底色
                areaColor: "#112B9B",
                // 高亮边缘+阴影样式
                borderWidth: 3,
                borderColor: "#36E5FE",
                shadowBlur: 6,
                shadowColor: "#3484F5",
                shadowOffsetX: -3,
                shadowOffsetY: 4,
              },
            },
          },
          // 中国地图
          {
            type: "map",
            map: "china",
            zoom: 1.2,
            aspectScale: 0.75,
            label: {
              // 默认文本标签样式
              normal: {
                color: "white",
                show: true,
              },
              // 高亮文本标签样式
              emphasis: {
                color: "yellow",
                fontSize: 22,
                fontWeight: "bold",
              },
            },
            itemStyle: {
              // 默认区域样式
              normal: {
                // 区域背景透明
                areaColor: "transparent",
                borderColor: "rgba(39,211,233, 1)",
                borderWidth: 1,
              },
              // 高亮区域样式
              emphasis: {
                // 高亮区域背景色
                areaColor: "#01ADF2",
              },
            },
          },
        ],
      };

      myChart.setOption(options);

      // 添加窗口大小改变监听事件，当窗口大小改变时，图表会重新绘制，自适应窗口大小
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.initEchartMap();
    });
  },
};
</script>