echarts: 自定义 tooltips（vue2/vue3）

echarts tooltips 的 formatter 支持返回 HTML 字符串或者创建的 DOM 实例
vue3 用 createVNode 创建 VNode 并传入数据, render 挂载，返回 VNode.el
vue2 用 new 一个组件实例，$mount 挂载， 返回实例的$el

VU3 案例

<!-- 组件 mapTooltips-->
<template>
  <div class="tool-box">
    <p class="tool-title">{{ data.name }}</p>
    <p class="tool-desc">总量：{{ data.value[2] }}</p>
    <p class="tool-desc">A：{{ data.value[3] }}</p>
    <p class="tool-desc">B：{{ data.value[4] }}</p>
    <p class="tool-desc">C：{{ data.value[5] }}</p>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps<{
  data: object
}>()
</script>
<style lang="scss" scope>
@import '@/assets/style/px2rem.scss';
.tool-box {
  width: px2rem(125);
  height: px2rem(148);
  background-image: url(../../assets/image/P1/layer@1x.png);
  background-image: -webkit-image-set(
·  url(../assets/image/P1/bg_title@2x.png) 1000w,
   url(../assets/image/P1/bg_title@3x.png) 1500w
  );
  background-repeat: no-repeat;
  background-size: 100%;
  padding: px2rem(11);
  margin-bottom: px2rem(4);
  .tool-title {
    font-size: px2rem(20);
    line-height: px2rem(25);
    color: #58c1d5;
  }
  .tool-desc {
    font-size: px2rem(15);
    color: #fff;
    line-height: px2rem(20);
    padding-top: px2rem(7);
    font-family: DIN-Medium;
  }
}
</style>

mapTooltips 组件挂载

import { createVNode, render } from 'vue'
import MapTooltip from './mapTooltip.vue'
const option = computed(() => {
  return {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        // 挂载 maptooltip 组件
        const com = createVNode(MapTooltip, { data: params.data })
        let mountNode = document.createElement('div')
        render(com, mountNode)
        return com.el
      },
      // 更改 tooltips 的位置
      position: function (point, params, dom, rect, size) {
        return {
          left: point[0],
          top: point[1] - size.contentSize[1] - 20
        }
      },
      // 设置 tooltips 默认的背景透明
      backgroundColor: 'rgba(0,0,0,0.0)',
      // 修改 echarts 默认 tooltips 样式
      extraCssText: 'padding:0px; border-radius:0; border-style:none'
    },
  }
})

VUE2 案例

<!-- 组件 pieTooltips-->
<template>
  <div class="pie-tooltip">
    <p class="pie-tooltip-title">{{ title }}</p>
  </div>
</template>

<script>
export default {
   data() {
    return {
      title: '',
    };
  },
  methods: {
    initData({name}){
      this.title = name
    }
  }
}

PieTooltip 组件挂载

import PieTooltip from './pieTooltip.vue'

// 设置 tooltips 的 formatter
formatter: function (params) {
  const com = new PieTooltip() // 保重每个组件是全新的
  com.initData(params) // 初始化 PieTooltip 组件的数据，先赋值在挂载
  com.$mount() // 挂载组件
  // 返回 HTML 字符串，不包含组件最外层，即： <p class="pie-tooltip-title">测试2</p>
  // return com.$el.innerHTML // 返回 HTML 字符串
  
  // 返回完整组件 DOM 实例，即：
  // <div class="pie-tooltip">
  //   <p class="pie-tooltip-title">测试2</p>
  //  </div>
  return com.$el // 返回 DOM 实例
}