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

前端很大一部工作就是还原UI，虽然现在Vue3 响应式框架很厉害了，但是依然有不少小伙伴手搓html代码，就像下面这段，费时费力。在echarts的tooltip组件中使用vue3自定义组件，可以增加不少摸鱼时间。

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

使用vue3 的render方法。

const containter = document.createElement("div") // Tooltip 是一个组件 // data 是props属性 render(createVNode(Tooltip, data ), containter)

用在echarts当中如下：

tooltip: { show: true, trigger: "item", borderWidth: 0, formatter: (params) => { const containter = document.createElement("div") // 子组件直接接收params动态渲染。 render(createVNode(Tooltip, params), containter) return containter } }, 优化方法二

使用我的开源库，在一个组件内完成这个操作（不过仅支持typescript项目，如果您使用JavaScript，就无缘了）

npm i @howuse/freedom-dialog导入函数 import { createFreedomDialog } from "@howuse/freedom-dialog" 创建方法

这里的define是一个vue组件，可以在组件内定义模板组件，不会渲染在页面上。renderContainer，返回一个html，便于使用。

const [define, renderContainer] = createFreedomDialog() 使用

这里数据的获取从默认插槽中获得即可，具体数据是从renderContainer传入，参看下面完整代码。

<define> <template #default="data"> <div class=" custom-tooltip"> 😄 <div> <span v-html="data.marker"></span>{{ data.value }} </div> </div> </template> </define>

5.完整代码

<template> <define> <template #default="data"> <div class=" custom-tooltip"> 😄 <div> <span v-html="data.marker"></span>{{ data.value }} </div> </div> </template> </define> <div style="width: 100%;height: 350px;"> <how-bar-chart :option="option" /> </div> </template> <script setup lang="ts"> import { createFreedomDialog } from "@howuse/freedom-dialog" import { HowBarChart } from "@howuse/echarts" import type { EChartsOption } from "echarts" import { computed } from "vue" const [define, renderContainer] = createFreedomDialog() const option = computed<EChartsOption>(() => { return { tooltip: { className: 'echarts-tooltip echarts-tooltip-dark', formatter(data) { return renderContainer(data) } }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'bar' } ] } }) </script> <style scoped> :global(.echarts-tooltip) { border: none !important; padding: 5px; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } :global(.echarts-tooltip-dark) { background-color: #333 !important; color: #fff; } </style>

组件还有其它的特别用法，具体可以参考网站 howuse.yigechengzi /freedom-dialog/