Vue 词云图 echart-wordCloud

Unknown series wordCloud
缺少引用：
import "echarts-wordcloud";

https://ecomfe.github.io/echarts-wordcloud/
https://www.npmjs.com/package/echarts-wordcloud?activeTab=versions

pnpm i echarts-wordcloud

import WordCloud from "@/views/dashboard/components/WordCloud.vue";

<WordCloud :options="visitTrendChartOptions" height="400px" />

实现代码：

<template>
  <div ref="chartRef" :style="{ width, height }"></div>
</template>

<script setup lang="ts">
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";

import { useResizeObserver } from "@vueuse/core";
import { TitleComponent } from "echarts/components";
import "echarts-wordcloud";

echarts.use([TitleComponent]);

const props = defineProps<{
  options: echarts.EChartsCoreOption;
  width?: string;
  height?: string;
}>();

const chartRef = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;

// 生成示例数据
const generateWordData = () => {
  const words = [
    "心动过速",
    "心动过缓",
    "心悸",
    "胸闷",
    "头晕",
    "乏力",
    "传导阻滞",
    "房扑",
    "房颤",
    "房早",
    "室颤",
    "室早",
  ];

  return words.map((word) => ({
    name: word,
    value: Math.floor(Math.random() * 1000) + 100,
  }));
};

const wordData = ref(generateWordData());

// 初始化图表
const initChart = () => {
  if (chartInstance) {
    chartInstance.dispose();
  }
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value);
    const option = {
      title: {
        text: "心律失常词云图",
        subtext: "基于词汇频率可视化",
        left: "center",
      },
      tooltip: {
        show: true,
      },
      series: [
        {
          type: "wordCloud",
          shape: "circle", //圆形
          left: "center",
          top: "center",
          width: "90%",
          height: "90%",
          sizeRange: [12, 60],
          rotationRange: [-80, 80], // 每个词旋转的角度范围和旋转的步进
          rotationStep: 5,
          gridSize: 8,
          drawOutOfBound: false,
          textStyle: {
            color: function () {
              return (
                "rgb(" +
                [
                  Math.round(Math.random() * 255),
                  Math.round(Math.random() * 255),
                  Math.round(Math.random() * 255),
                ].join(",") +
                ")"
              );
            },
          },
          emphasis: {
            focus: "self",
            textStyle: {
              shadowBlur: 10,
              shadowColor: "#333",
            },
          },
          data: wordData.value.slice(0, 15),
        },
      ],
    };

    chartInstance.setOption(option);

    // 添加点击事件监听
    chartInstance.on("click", (params) => {
      console.log(params);
      ElMessage.success(params.data.name + " 数量：" + params.data.value);
    });
  }
};

// 监听尺寸变化，自动调整
useResizeObserver(chartRef, () => {
  chartInstance?.resize();
});

// 监听 options 变化，更新图表
watch(
  () => props.options,
  (newOptions) => {
    if (chartInstance && newOptions) {
      chartInstance.setOption(newOptions);
    }
  },
  { deep: true }
);

onMounted(() => {
  nextTick(() => initChart());
});

onBeforeUnmount(() => {
  chartInstance?.dispose();
});
</script>