echarts地图的tooltip自定义样式显示图表

echarts地图的tooltip自定义样式显示图表

最近遇到一个需求：需要在地图中实现鼠标点击或者停留在地图中某一片区域时，该区域显示亮高和显示tooltip提示框信息，但是难点在于需要在tooltip提示框中再绘制一层图表。按以往我们做过都是这种，tooltip提示框中只是单纯显示文本信息。

但是，需求要的不是这种，先不多说，直接给你们看最终展示的效果：
鼠标点击或停留在某一片区域时，在tooltip提示框中显示该区域的另外一层数据图表，鼠标单击可选中或取消区域的亮高显示，以及两层地图凸显一个立体层次感。看完记得点个赞（技术分享，加快成长）。

这里我们以广州市作为Demo，可以看出这是我们想要的在tooltip提示框中绘制另外一层图表的效果。

ok，接下来我们不唠嗑，直接上代码（大家最喜欢的哈哈）。

项目结构：
项目是使用Vue + typescript + antd vue，大家根据自己的项目来配置。

一、创建gzMap.vue文件：

<template>
  <div class="main">
  	<!-- 绘制广州地图 -->
    <div ref="gzMap" class="gzMap"></div>
    <!-- 点击不同模块，切换显示不同tooltip中的图表类型，这里Demo只展示一种类型 -->
    <div class="Mybutton">
      <a-radio-group :value="typeName" @change="handleTypeChange">
        <a-radio-button value="type1">
          模块一
        </a-radio-button>
        <a-radio-button value="type2">
          模块二
        </a-radio-button>
      </a-radio-group>
    </div>
  </div>
</template>

<script lang="ts">
import {
     Component, Prop, Vue, Watch } from 'vue-property-decorator';
import gzMapData from "@/common/gzMap-common/index";

@Component
export default class HelloWorld extends Vue {
    

  //模块名称
  private typeName: string = "type1";

  // 广州地图各类型指数数据
  private guangzhouDatas: any;

  // 引入广州地图地理位置数据
  private guangzhouMap: any = require("@/common/gzMap-common/guangzhou.json");

  // 引入地图需要的tooltip配置项
  private mapAreaDatas: any;

  private $echarts: any;

  //监听传入指数模块名称改变
  @Watch("typeName", {
     immediate: true })
  private watchNum(val: string, oldVal: string) {
    
    // 根据指数类型引入对应echart配置项文件
    this.OptionType();
    // 根据指数类型引入对应echart地图数据文件
    this.dataType();
  }

  private mounted() {
    
    const ele = this.$refs.gzMap;
    const guangzhouChart: any = this.$echarts.init(ele);
    //页面切换，销毁监听事件
    this.$on("hook:beforeDestroy", () => {
    
      window.removeEventListener("resize", () => {
    
        guangzhouChart.resize();
      });
    });
  }

  // 根据不同模块指数，按需动态引入不同echart配置项文件，用于地图tooltip渲染
  private OptionType() {
    
    if (this.typeName == "type1") {
    
      //指数1数据
      import("@/common/gzMap-common/gzMapData1").then(module => {
    
        this.mapAreaDatas = module.default.option_gzMapType;
      });
    }
  }

  // 根据不同模块指数，按需要动态引入不同地图数据文件
  private dataType() {
    
    import("@/common/gzMap-common/index").then(module => {
    
      //指数模块名称
      let tag: string = "";
      tag = this.typeName;
      switch (tag) {
    
        case "type1": {
    
          this.guangzhouDatas = module.default.dataType1;
          break;
        }