当前位置：首页 > news >正文

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

news 来源：原创 2025/5/2 2:49:57

前端很大一部工作就是还原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>