Vue3+TS+ECharts绘制词云图

1.安装依赖包

"echarts": "^5.4.1",
"echarts-wordcloud": "2.1.0",
"vue": "^3.2.45"

注意：使用npm或者安装cnpm安装echarts-wordcloud时，无法安装到package.json
解决办法：使用yarn安装依赖

npm install -g yarn

使用yarn安装依赖

yarn add echarts echarts-wordcloud -S

2.书写代码

HTML部分

<template>
  <div>
    <div id="wordCloud" style="width: 450px; height: 200px"></div>
  </div>
</template>

echarts一定要设置宽高才会显示

TS部分,使用setup函数,结合echarts-wordcloud官网案例编写

import * as echarts from 'echarts/core'
import 'echarts-wordcloud'
import { onMounted } from 'vue'

onMounted(() => {
  init()
})
const init = () => {
  var myChart = echarts.init(document.getElementById('wordCloud')!)

  const option = {
    series: [
      {
        type: 'wordCloud',

        // 要绘制云的形状,默认是 circle，可选的参数有 cardioid 、 diamond 、 triangle-forward 、 triangle 、 star
        shape: 'circle',

        // 保持maskImage的纵横比或1:1的形状
        // 从echarts-wordcloud@2.1.0开始支持该选项
        keepAspect: false,

        // 左/上/宽/高/右/下用于字云的定位
        // 默认放置在中心，大小为75% x 80%。
        left: 'center',
        top: 'center',
        width: '70%',
        height: '80%',
        right: null,
        bottom: null,

        // 数据中的值将映射到的文本大小范围。
        // 默认值为最小12px，最大60px。
        sizeRange: [12, 60],

        // 文字旋转范围和步进程度。文本将通过rotationStep 45在[- 90,90]范围内随机旋转
        rotationRange: [-90, 90],
        rotationStep: 45,

        // 网格大小(以像素为单位)，用于标记画布的可用性
        // 网格大小越大，单词之间的间隔就越大
        gridSize: 8,

        // 设置为true允许文字部分地绘制在画布之外。
        // 允许画比画布大的字
        // 从echarts-wordcloud@2.1.0开始支持该选项
        drawOutOfBound: false,

        // 如果字体太大，无法显示文本，是否缩小文本。如果设置为false，则文本将不被渲染。如果设置为true，文本将被缩小。
        shrinkToFit: false,

        // 是否执行布局动画。
        //当单词较多时禁用会导致UI阻塞。
        layoutAnimation: true,

        // 全局文本样式
        textStyle: {
          fontFamily: 'sans-serif',
          fontWeight: 'bold',
          // Color可以是回调函数或颜色字符串
          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: data,
      },
    ],
  }
  myChart.setOption(option)
}

3.data数据格式

const data =[
{value: 67, name: '红腹角雉'},
{value: 98, name: '麝牛'},
{value: 97, name: '山舌鱼'},
{value: 100, name: '羚羊'},
{value: 37, name: '非洲王子'},
{value: 83, name: '麋鹿'},
{value: 60, name: '中华鲟'},
{value: 42, name: '鮪鱼'},
{value: 96, name: '射水鱼'},
{value: 54, name: '果子狸'},
{value: 33, name: '小春鱼'},
{value: 84, name: '水獭'},
{value: 86, name: '刺猬'}
]

最终显示效果