vue3+echarts-wordcloud文档云图

echart是没有文档云图的api的，这个时候可以借鉴echarts-wordcloud

一、下载echarts、echarts-wordcloud

npm install echarts
npm install echarts-wordcloud

二、使用

<template>
    <el-card :body-style="{
        padding: 0
    }">
        <div class="container" ref="target"></div>
    </el-card>
</template>
<script setup>
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import { ref, onMounted } from 'vue'
import wordcloudBg from '@/assets/wordcloud.png'

/**
 * 生成随机色值
 */
const randomRGB = () => {
    const r = Math.floor(Math.random() * 255)
    const g = Math.floor(Math.random() * 255)
    const b = Math.floor(Math.random() * 255)
    return `rgb(${r}, ${g}, ${b})`
}

const wordCloudData = ref([])
const getWordCloudData = async () => {
    const res = await getChartWordCloud()
    wordCloudData.value = res
    // 渲染图表
    renderChart()
}
getWordCloudData()

const target = ref(null)
let mChart = null
onMounted(() => {
    mChart = echarts.init(target.value)
})

/**
 * 渲染图表
 */
const renderChart = () => {
    // 图像轮廓
    var maskImage = new Image()
    maskImage.src = wordcloudBg

    var option = {
        title: {
            text: '云图'
        },
        series: [
            {
                // 类型
                type: 'wordCloud',
                // 数据映射文本的大小范围
                sizeRange: [4, 80],
                // 文字旋转范围
                rotationRange: [0, 0],
                // 单词之间的间距
                gridSize: 0,
                // 绘制将排除图像的轮廓
                maskImage: maskImage,
                // 渲染动画
                layoutAnimation: true,
                // 字体
                textStyle: {
                    // 随机色值
                    color: randomRGB
                },
                // 高亮字体
                emphasis: {
                    textStyle: {
                        fontWeight: 'bold',
                        color: '#000'
                    }
                },
                // 数据
                data: wordCloudData.value
            }
        ]
    }

    // 等待图像加载完成之后
    maskImage.onload = function () {
        mChart.setOption(option)
    }
}

</script>