在echarts的tooltip组件中使用vue自定义组件

今天在码代码的时候遇到了一个需求，这个要求在tooltip的时候展示比较复杂的东西，如下图：

这是已经做好的效果，原来最开始的想法是用最笨的办法，直接拿字符串去拼html代码，类似于下面这个样子：

tooltip: {
              show: true,
              trigger: "item",
              borderWidth: 0,
              formatter: (params) => {
                        return `<div class="top">
                                    <div class="item"></div>
                                </div>`
               
            },

，但使用这种方法去实现上面的需求显然太笨拙了，这需要在tooltip里面写很长一串html代码，这显然是不符合代码要求的，所以后来做了一下优化，把这部分代码单独提出来做成了一个组件，在每次鼠标tooltip时去挂载这个组件，代码如下：

//父组件里面
//引入路由对象，这个按照自己项目的具体情况去引入，我这个项目使用的router就是来自于公司统一封装的
import { router} from "@epnc-t/common-vue"
//引入自定义组件
import MapTooltip from "./MapTooltip.vue"
//并按照vue的语法去注册这个组件
components: { MapTooltip }
//在echarts的tooltip内，这样改写
 tooltip: {
              show: true,
              trigger: "item",
              borderWidth: 0,
              formatter: (params) => {
                  //自己需要什么数据就去构建就好了，这里我直接省略了我的数据构建部分
                  let data = params.data
                  let obj = {
                    distName: data.distName,
                    arr: [
                      {
                        label: data.cuStateName,
                        number: data.loadRate,
                        title: "负载率"
                      },
                      {
                        label: data.phStateName,
                        number: data.linkRelativeRatio,
                        title: `三相不平衡度`
                      }
                    ]
                  }

                  const div = document.createElement("div")
                  let mapTooltip = new Vue({
                    router, //这个router就是你自己项目使用的router，也就是上面引入的router
                    render: (h) =>
                      h(MapTooltip, { //这个组件就是你上面引入的自定义的组件
                        props: { params: obj } //这个obj就是你自己构建的数据
                      })
                  })
                  mapTooltip.$mount(div)
                  return mapTooltip.$el
                }
                return
              }
            },

//子组件内，这个就是vue的组件的常规使用方法

<template>
  <div class="tooltip-all">
    <!-- 此处的逻辑按照自己的需求去写就是 -->
    </div>
  </div>
</template>

<script>
//以下的js逻辑按照自己的需求去写即可
export default {
  props: ["params"],//这里就是接收的父组件传过来的数据
  data() {
    return {}
  }
}
</script>

<style scoped lang="scss">

</style>

以上就是优化的结果，小伙伴有其他想法欢迎一起讨论