e-charts经纬度渲染map图，tooltip中异步请求数据进行渲染

• 效果图：

  

• 全部代码 ：

<template>
  <div class="maps-container">
    <div class="chart-view" ref="mainMap"></div>
  </div>
</template>
<script>
import "echarts/map/js/province/hunan.js";
import * as echarts from "echarts";
import { getAllMf, getListByParent } from "@/api/dynamic/index";
import moment from "moment";


export default {
  data() {
    return {
      scaleWidth: 1,
      scaleHeight: 1,
    };
  },
  mounted() {
    const defaultWidth = 1920;
    const defaultHeight = 1080;
    const width = document.body.clientWidth;
    const height = document.body.clientHeight;
    if (height && width) {
      this.scaleWidth = (width / defaultWidth).toFixed(2);
      this.scaleHeight = (height / defaultHeight).toFixed(2);
    }
    this.init();
    window.clickFun = this.clickFun;
  },
  methods: {
    async init() {
      const { rows } = await getAllMf();
      const chartView = echarts.init(this.$refs.mainMap);
      chartView.setOption(this.getChartJson(rows));
      // 屏幕重置大小
      window.addEventListener("resize", () => {
        chartView.resize();
      });
    },
    getChartJson(rows) {
      const option = {
        tooltip: {
          trigger: "item",
          triggerOn: "click", //点击触发
          enterable: true, //鼠标是否可进入提示框浮层中
          backgroundColor: "#001522",
          borderColor: "#7ff8f6",
          borderWidth: 1,
          position: function(point, params, dom, rect, size) {
            // console.log(point);
            return [point[0] + 83, point[1] - 140];
          },
        },
        geo: {
          map: "湖南",
          roam: fa