ECharts – 20. echarts-wordcloud词云图


首先，看效果图：

使用说明

1. 引入js库文件

1
2
<script src="echarts.min.js"></script>
<script src="echarts-wordcloud.min.js"></script>

echarts下载地址：https://echarts.apache.org/zh/download.html

echarts-wordcloud下载地址：https://www.npmjs.com/package/echarts-wordcloud

2. 准备一个 DOM 容器

1
<div class="fill-h" id="wordCloudChart"></div>

3.使用echarts.init、setOption配置样式及数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
    const wordChart= echarts.init(document.getElementById("wordCloudChart"));
                const wordOpt = {
                    series: [{
                        type: 'wordCloud',
                        shape: 'circle', //circle cardioid diamond triangle-forward triangle
                        left: 0,
                        right: 0,
                        top: 0,
                        right: 0,
                        width: '100%',
                        height: '100%',
                        gridSize: 0, //值越大，word间的距离越大，单位像素
                        sizeRange: [10, 32], //word的字体大小区间，单位像素
                        rotationRange: [-90, 90], //word的可旋转角度区间
                        textStyle: {
                            normal: {
                                color: function() {
                                    return 'rgb(' + [
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160)
                                    ].join(',') + ')';
                                }
                            },
                            emphasis: {
                                shadowBlur: 2,
                                shadowColor: '#000'
                            }
                        },
                        data: [{
                            name: '数据可视化',
                            value: 3000,
                            // textStyle: {
                            //  normal: {color: '#f52f55'},
                            //  emphasis: {}
                            // }
                        }, {
                            name: '大数据',
                            value: 2181
                        }, {
                            name: '云计算',
                            value: 1386
                        }, {
                            name: '物联网',
                            value: 2055
                        }, {
                            name: '移动互联网',
                            value: 2467
                        }, {
                            name: '人工智能',
                            value: 2244
                        }, {
                            name: '深度学习',
                            value: 1898
                        }, {
                            name: '机器学习',
                            value: 1484
                        }, {
                            name: '区块链',
                            value: 3865
                        }, {
                            name: '互联网+',
                            value: 2222
                        }, {
                            name: '智能合约',
                            value: 366
                        }, {
                            name: '比特币',
                            value: 360
                        }, {
                            name: '数据挖掘',
                            value: 273
                        }]
                    }],
                    backgroundColor: 'rgba(100, 255, 255, 0.6)'
                };
                wordChart.setOption(wordOpt);

4.运行效果图