base_ui/components/charts/WordCloud.vue

<template>
  <div
    ref="chart"
    class="word-cloud-chart"
    :style="{ width: $attrs.width, height: $attrs.height }"
  ></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onBeforeUnmount, ref } from "vue";
import * as echarts from "echarts/core";
import { TooltipComponent, TitleComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

// Import the word cloud extension dynamically to avoid issues
// await import('echarts-wordcloud'); // Ensure this import works correctly

export default defineComponent({
  props: {
    data: {
      type: Array,
      required: true,
    },
    gridSize: {
      type: Number,
      default: 8,
    },
  },
  ssr: false,
  name: "WordCloudChart",
  setup(props) {
    console.log(props.data);
    console.log(props.gridSize);

    const chart = ref(null);
    let myChart: echarts.ECharts | null = null;

    onMounted(async () => {
      // Dynamically import the word cloud extension
      await import("echarts-wordcloud");

      // Register the necessary components
      echarts.use([TooltipComponent, TitleComponent, CanvasRenderer]);

      if (chart.value) {
        myChart = echarts.init(chart.value);

        myChart.setOption({
          tooltip: {
            show: true,
            formatter: function (params) {
              return (
                '<div style="font-weight: bold;;">' +
                params.data.name +
                '</div><div style="text-align:center;">دفعات تکرار: ' +
                params.data.value +
                " " +
                "بار" +
                "</div>"
              );
            },
            textStyle: {
              fontFamily: "sahel",
              fontSize: 14, // اندازه فونت
            },
          },
          series: [
            {
              type: "wordCloud",
              shape: "square",
              keepAspect: false,
              shrinkToFit: true,
              drawOutOfBound: false,
              left: "center",
              top: "center",
              width: "100%",
              height: "100%",
              right: null,
              bottom: null,
              sizeRange: [12, 60],
              rotationRange: [-90, 90],
              rotationStep: 45,
              layoutAnimation: true,
              gridSize: props.gridSize ? props.gridSize : 25,
              // animationDurationUpdate: 1000, // مدت زمان انیمیشن به میلی‌ثانیه
              // animationEasingUpdate: "cubicInOut", // نوع انیمیشن
              textStyle: {
                fontFamily: "sahel",
                fontWeight: "bold",
                color: function () {
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                    ].join(",") +
                    ")"
                  );
                },
              },
              emphasis: {
                focus: "self",
                textStyle: {
                  textShadowBlur: 10,
                  textShadowColor: "#333",
                },
              },
              data: props.data,
            },
          ],
        });
      }
    });

    onBeforeUnmount(() => {
      if (myChart) {
        myChart.dispose();
      }
    });

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

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