echarts-wordcloud

Third-party Wordcloud extension based on wordcloud2.js for Apache ECharts.

Examples

Google Trends

ECharts Option Keywords

Install

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

Or

1npm install echarts
2npm install echarts-wordcloud

1import * as echarts from 'echarts';
2import 'echarts-wordcloud';

⚠️ NOTE:

echarts-wordcloud@2 is for echarts@5 echarts-wordcloud@1 is for echarts@4

Usage

1var chart = echarts.init(document.getElementById('main'));
2
3chart.setOption({
4    ...
5    series: [{
6        type: 'wordCloud',
7
8        // The shape of the "cloud" to draw. Can be any polar equation represented as a
9        // callback function, or a keyword present. Available presents are circle (default),
10        // cardioid (apple or heart shape curve, the most known polar equation), diamond (
11        // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.
12
13        shape: 'circle',
14
15        // Keep aspect ratio of maskImage or 1:1 for shapes
16        // This option is supported from echarts-wordcloud@2.1.0
17        keepAspect: false,
18
19        // A silhouette image which the white area will be excluded from drawing texts.
20        // The shape option will continue to apply as the shape of the cloud to grow.
21
22        maskImage: maskImage,
23
24        // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
25        // Default to be put in the center and has 75% x 80% size.
26
27        left: 'center',
28        top: 'center',
29        width: '70%',
30        height: '80%',
31        right: null,
32        bottom: null,
33
34        // Text size range which the value in data will be mapped to.
35        // Default to have minimum 12px and maximum 60px size.
36
37        sizeRange: [12, 60],
38
39        // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45
40
41        rotationRange: [-90, 90],
42        rotationStep: 45,
43
44        // size of the grid in pixels for marking the availability of the canvas
45        // the larger the grid size, the bigger the gap between words.
46
47        gridSize: 8,
48
49        // set to true to allow word being draw partly outside of the canvas.
50        // Allow word bigger than the size of the canvas to be drawn
51        drawOutOfBound: false,
52
53        // if the font size is too large for the text to be displayed,
54        // whether to shrink the text. If it is set to false, the text will
55        // not be rendered. If it is set to true, the text will be shrinked.
56        shrinkToFit: false,
57
58        // If perform layout animation.
59        // NOTE disable it will lead to UI blocking when there is lots of words.
60        layoutAnimation: true,
61
62        // Global text style
63        textStyle: {
64            fontFamily: 'sans-serif',
65            fontWeight: 'bold',
66            // Color can be a callback function or a color string
67            color: function () {
68                // Random color
69                return 'rgb(' + [
70                    Math.round(Math.random() * 160),
71                    Math.round(Math.random() * 160),
72                    Math.round(Math.random() * 160)
73                ].join(',') + ')';
74            }
75        },
76        emphasis: {
77            focus: 'self',
78
79            textStyle: {
80                textShadowBlur: 10,
81                textShadowColor: '#333'
82            }
83        },
84
85        // Data is an array. Each array item must have name and value property.
86        data: [{
87            name: 'Farrah Abraham',
88            value: 366,
89            // Style of single text
90            textStyle: {
91            }
92        }]
93    }]
94});