词云图 根据图片绘制轮廓

效果

<template>
  <el-card
    :body-style="{
      padding: 0
    }"
  >
    <div class="container" ref="target"></div>
  </el-card>
</template>

<style lang="scss" scoped>
.container {
  height: 240px;
}
</style>

<script setup>
export 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})`
}
import * as echarts from 'echarts'  // 引入echarts
import 'echarts-wordcloud'  // 需要下载这个包
import { ref, onMounted } from 'vue'
import { randomRGB } from '@/utils/color' //随机颜色 函数在上方
import { getChartWordCloud } from '@/api/chart.js' // 请求api接口
import { useI18n } from 'vue-i18n' // 国际化 （不做国际化的可忽略）
import { watchSwitchLang } from '@/utils/i18n' // 监听的国际化 （不做国际化的可忽略）
import wordcloudBg from '@/assets/wordcloud.png' // 图片  （根据图片生成轮廓用的）
const i18n = useI18n()

/**
 * 获取数据
 */
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: i18n.t('msg.chart.cloudChartTitle')
    },
    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)
  }
}

watchSwitchLang(renderChart)
</script>

<style lang="scss" scoped>
.container {
  height: 240px;
}
</style>