在nuxt3.js项目中引入echarts5版本和echarts-wordcloud报错

今天在nuxt3.js项目中引入echarts5版本和echarts-wordcloud报错，被折磨的要疯掉，必须记录一下~~~~(>_<)~~~~

WordCloudChart does not have an install method

网上查了很多解决方案，按照指示一步一步的排查，echarts-wordcloud版本删了装，装了又删，还是还是不行…

最后我在想，要不要看看node安装包里的echarts-wordcloud包里的README.md，看看里面是怎么写的，说不定有答案。看完以后我发现好像没有说到wordcloud需要注册。莫非只需引入不需注册。把代码改了一下，OK，成了！

<template>
  <div ref="chart" class="word-cloud-chart"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts/core';
// import { WordCloudChart } from 'echarts/charts';
import { TooltipComponent, TitleComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
// await import('echarts-wordcloud'); // 确保这个导入没有问题


// 注册所需的组件
echarts.use([TooltipComponent, TitleComponent, CanvasRenderer]);

const wordCloudRef = ref<HTMLElement | null>(null);
export default defineComponent({
  ssr: false,
  name: 'WordCloud',
  setup() {
    const chart = ref(null);
    let myChart: echarts.ECharts | null = null;

    onMounted(async () => {
      // 动态导入 wordcloud 扩展
      await import('echarts-wordcloud');
      // const WordCloudChart = wordcloud.default || wordcloud;
      // if (WordCloudChart && WordCloudChart.install) {
      //   echarts.use([WordCloudChart, TooltipComponent, TitleComponent, CanvasRenderer]);
      //   alert(0)
      //   // 初始化你的图表...
      // } else {
      //   console.error('WordCloudChart does not have an install method');
      // }

      if (chart.value) {
        myChart = echarts.init(chart.value);
        myChart.setOption({
          series: [
            {
              type: 'wordCloud',
              gridSize: 2,
              sizeRange: [12, 50],
              rotationRange: [-90, 90],
              shape: 'pentagon',
              width: 600,
              height: 400,
              drawOutOfBound: true,
              textStyle: {
                normal: {
                  color: () => {
                    return 'rgb(' + [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160)
                    ].join(',') + ')';
                  }
                }
              },
              data: [
                { name: 'Example', value: 10000 },
                { name: 'Demo', value: 6181 },
                // ...更多数据
              ]
            }
          ]
        });
      }
    });

    return {
      chart
    };
  }
});
</script>

<style scoped>
.word-cloud-chart {
  width: 100%;
  height: 500px;
}
</style>

其中被注释的地方就是造成报错的代码

import { WordCloudChart } from 'echarts/charts';
echarts.use([WordCloudChart, TooltipComponent, TitleComponent, CanvasRenderer]);