H函数的使用--vue3+echarts举例

这里是效果,

这里的tootip是单独写的一个组件

<template>
  <h1>我是h创建的组件</h1>
  <h1>我是h创建的组件</h1>
</template>
<script setup>
let props = defineProps(["params"]);
console.log(props.params);
</script>

这是父组件ds 

<template>
  <div class="home-box" style="width: 500px; height: 500px"></div>
</template>

<script setup>
import { ref, h, render, onMounted } from "vue";
import * as echarts from "echarts";
import ElementNode from "./createComponent.vue";
let chartsFn = () => {
  let myChart = echarts.init(document.querySelector(".home-box"));
  let option = {
    title: {
      text: "Basic Graph",
    },
    tooltip: {
      show: true,
      formatter: function (params) {
        let vnode = h(ElementNode);
        let odiv = document.createElement("div");
        document.body.appendChild(odiv);
        render(vnode, odiv);

        return odiv;
      },
    },
    animationDurationUpdate: 1500,
    animationEasingUpdate: "quinticInOut",
    series: [
      {
        type: "graph",
        layout: "none",
        symbolSize: 50,
        roam: true,
        label: {
          show: true,
        },
        edgeSymbol: ["circle", "arrow"],
        edgeSymbolSize: [4, 10],
        edgeLabel: {
          fontSize: 20,
        },
        data: [
          {
            name: "Node 1",
            x: 300,
            y: 300,
          },
          {
            name: "Node 2",
            x: 800,
            y: 300,
          },
          {
            name: "Node 3",
            x: 550,
            y: 100,
          },
          {
            name: "Node 4",
            x: 550,
            y: 500,
          },
        ],
        // links: [],
        links: [
          {
            source: 0,
            target: 1,
            symbolSize: [5, 20],
            label: {
              show: true,
            },
            lineStyle: {
              width: 5,
              curveness: 0.2,
            },
          },
          {
            source: "Node 2",
            target: "Node 1",
            label: {
              show: true,
            },
            lineStyle: {
              curveness: 0.2,
            },
          },
          {
            source: "Node 1",
            target: "Node 3",
          },
          {
            source: "Node 2",
            target: "Node 3",
          },
          {
            source: "Node 2",
            target: "Node 4",
          },
          {
            source: "Node 1",
            target: "Node 4",
          },
        ],
        lineStyle: {
          opacity: 0.9,
          width: 2,
          curveness: 0,
        },
      },
    ],
  };
  myChart.setOption(option);
};

onMounted(() => {
  chartsFn();
  let obox = document.querySelector(".box");
  let vnode = h(ElementNode, { params: "传给你" });
  render(vnode, obox);
});
</script>

这里其实完全可以在echarts图表的formater去写模版字符串,然后展示,但是如果纯字符串去写有一个问题,如果tootip效果比较复杂花哨那就没法写了,毕竟还需要传参,这样通过组件的方式用h函数导入进来后面可以接着传递参数,以便于实现更多的逻辑 ..