Vue3 词云

效果图：

<template>
  <v-chart ref="vChartRef" :option="option" style="background-color: #000;"></v-chart>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import VChart from "vue-echarts";
import * as echarts from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { GridComponent } from "echarts/components";
import "echarts-wordcloud";
echarts.use([CanvasRenderer, GridComponent]);

const vChartRef = ref();

const chartData = ref<any>([
  {
    name: "矛盾调解",
    value: 500,
  },
  {
    name: "拖欠克扣工资",
    value: 300,
  },
  {
    name: "食品安全",
    value: 300,
  },
  {
    name: "街面秩序",
    value: 200,
  },
  {
    name: "涉法涉讼",
    value: 200,
  },
  {
    name: "施工噪音投诉",
    value: 100,
  },
  {
    name: "信访接待",
    value: 100,
  },
  {
    name: "社会治安",
    value: 100,
  },
  {
    name: "房屋交易",
    value: 50,
  },
  {
    name: "施工管理",
    value: 50,
  },
  {
    name: "日常维控",
    value: 20,
  },
]);

const option = reactive({
  backgroundColor: "rgba(0,0,0,0)",
  tooltip: {
    show: true,
    formatter: (params: any) => {
      return `${params.name}: ${params.value}`;
    },
  },
  series: [
    {
      type: "wordCloud",
      shape: "pentagon",
      left: "center",
      top: "center",
      width: "100%",
      height: "100%",
      right: null,
      bottom: null,
      sizeRange: [14, 31],
      rotationRange: [0, 0],
      rotationStep: 0,
      gridSize: 25,
      drawOutOfBound: false,
      layoutAnimation: true,
      emphasis: {
        focus: "none",
      },
      data: chartData.value,
      textStyle: {
        fontFamily: "AlibabaPuHuiTi_2_85_Bold",
        fontWeight: 600,
        color: () => {
          const colors = [
            "#029CD4FF",
            "#D54941FF",
            "#3B9330FF",
            "#F5BA18FF",
            "#A0DA12FF",
            "#E37318FF",
            "#8E56DDFF",
            "#2BA471FF",
            "#029CD499",
            "#D5494199",
            "#3B933099",
            "#F5BA1899",
            "#A0DA1299",
            "#E3731899",
            "#8E56DD99",
            "#2BA47199",
            "#029CD44D",
            "#D549414D",
            "#3B93304D",
            "#F5BA184D",
            "#A0DA124D",
            "#E373184D",
            "#8E56DD4D",
            "#2BA4714D",
          ];
          return colors[Math.floor(Math.random() * colors.length)];
        },
      },
    },
  ],
});
</script>