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>