【vue】【javascript】【echarts】实现词云图

nodejs：14.19.1

vue：2.5.2

echarts：5.3.0

echarts-wordcloud：2.0.0

ECharts 是一个由百度开发的强大的图表库，它可以生成多种类型的图表，包括词云图。要使用 ECharts 绘制词云图，你需要首先引入 ECharts 的核心库以及词云图的扩展库 echarts-wordcloud。

1、加在echarts和echarts-wordcloud依赖包

npm install echarts

npm install echarts-wordcloud

2、在 HTML 页面中添加一个用于放置图表的容器元素。

<template>
  <div id="wordcloudId" class="wordcloud" ref="wordcloudRef"></div>
</template>

3、设置css样式，如不设置宽高则会因为容器不够高而生成不了

.wordcloud {
   width: 200px;
   height: 200px;
}

4、引入依赖包

// 引入包
import * as echarts from 'echarts'
import 'echarts-wordcloud/dist/echarts-wordcloud.min'

5、初始化 ECharts 实例，并配置词云图选项。

// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('wordcloudRef'));

// 指定图表的配置项和数据
var option = {
    tooltip: {},
    series: [{
        type: 'wordCloud',
        sizeRange: [20, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        shape: 'circle', // 可以是 'circle', 'cardioid', 'diamond', 'triangle-forward', 'triangle', 'pentagon', 'star'
        width: '100%',
        height: '100%',
        left: 'center',
        top: 'center',
        textStyle: {
            color: function () {
                return 'rgb(' + [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                ].join(',') + ')';
            }
        },
        data: [
            {name: 'Example 1', value: 1000},
            {name: 'Example 2', value: 900},
            {name: 'Example 3', value: 800},
            {name: 'Example 4', value: 700},
            {name: 'Example 5', value: 700},
            {name: 'Example 6', value: 700},
            {name: 'Example 7', value: 700},
            // 更多数据...
        ]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

6、如果页面元素尺寸发生变化，记得调用 resize 方法更新图表。

window.addEventListener('resize', function () {
    myChart.resize();
});