uni-app echarts-wordcloud 词云插件 二次进入报错

针对您提到的 uni-app 中使用 echarts-wordcloud 词云插件在二次进入页面时出现的报错问题，这通常与组件的生命周期管理或图表实例的重复初始化有关。下面是一个可能的解决方案，通过确保图表实例在组件销毁时被正确清理，以及在组件重新创建时重新初始化图表实例。

步骤 1: 安装依赖

首先，确保您已经安装了 echarts 和 echarts-wordcloud 插件。

npm install echarts echarts-wordcloud --save

步骤 2: 创建 ECharts 组件

在 uni-app 中创建一个自定义组件，用于封装 ECharts 图表，包括词云。

<template>
  <view class="chart-container">
    <canvas canvas-id="wordcloud" style="width: 100%; height: 100%;"></canvas>
  </view>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-wordcloud';

export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  methods: {
    initChart() {
      const query = this.$createSelectorQuery().select('#wordcloud');
      query.fields({ node: true, size: true }).exec((res) => {
        const canvas = res[0].node;
        const width = res[0].width;
        const height = res[0].height;

        this.chart = echarts.init(canvas, null, {
          width: width,
          height: height,
        });

        const option = {
          // 配置您的词云选项
          series: [{
            type: 'wordCloud',
            gridSize: 20,
            sizeRange: [12, 50],
            rotationRange: [-45, 0, 45, 90],
            shape: 'circle',
            width: '100%',
            height: '100%',
            drawOutOfBound: false,
            textStyle: {
              normal: {
                color: function () {
                  return 'rgb(' + [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                  ].join(',') + ')';
                },
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            data: [/* 您的数据 */],
          }],
        };

        this.chart.setOption(option);
      });
    },
  },
};
</script>

注意事项

• 确保在组件销毁前调用 chart.dispose() 方法来清理图表实例，避免内存泄漏和重复初始化问题。
• 在 mounted 钩子中初始化图表，确保 DOM 已经准备好。
• 如果您的数据是异步获取的，请在数据加载完成后调用 setOption 方法更新图表。

通过上述方法，应该可以解决您遇到的二次进入页面时词云插件报错的问题。如果问题依旧，请检查具体的错误信息，以便进一步调试。