echarts 提示框異步擷取資料 —— formatter 異步回調函數的使用

核心代碼

= 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>