如何在 Vue 3 中使用 ECharts WordCloud 词云 组件并展示正确的 JavaScript 语法？

在 Vue 3 中使用 ECharts 的 WordCloud 词云组件，首先需要安装 ECharts 和相关的 Vue 负责封装的库，如 vue-echarts 或 v-charts。以下是基本步骤：

1. 安装依赖：
使用 npm 安装：

   npm install echarts @vue/echarts --save

2. 引入组件：
在 `main.js` 或者你的组件文件中导入 ECharts 和对应的组件：

   import ECharts from '@vue/echarts'
   import WordCloud from 'echarts/components/graphic/WordCloud'
   Vue.use(ECharts)

3. 创建组件并渲染词云：
在 Vue 组件模板中，你可以创建一个 div 元素，并在 mounted 生命周期钩子中初始化 ECharts 实例并绘制词云图：

   <template>
     <div ref="chart" style="width: 600px; height: 400px;"></div>
   </template>

   <script>
   export default {
     name: 'WordCloudComponent',
     components: { WordCloud },
     data() {
       return {
         wordData: [{ name: '词1', value: 150 }, { name: '词2', value: 90 }, ...] // 填充数据
       }
     },
     methods: {
       initChart() {
         const myChart = this.$refs.chart
         const option = {
           wordCloud: {
             textStyle: {
                 color: function (text, category) {
                   return 'red'; // 可以自定义字体颜色
                 },
               },
             words: this.wordData,
           },
         };
         myChart.setOption(option);
       },
     },
     mounted() {
       this.initChart();
     },
   }
   </script>

这里 `wordData` 是一个数组，包含词和对应频率的对象。你可以根据需求替换数据。