ECharts wordcloud extension based on wordcloud2.js

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 dragon-echarts-wordcloud

1var echarts = require('echarts');
2require('dragon-echarts-wordcloud');

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        // A silhouette image which the white area will be excluded from drawing texts.
16        // The shape option will continue to apply as the shape of the cloud to grow.
17
18        maskImage: maskImage,
19
20        // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
21        // Default to be put in the center and has 75% x 80% size.
22
23        left: 'center',
24        top: 'center',
25        width: '70%',
26        height: '80%',
27        right: null,
28        bottom: null,
29
30        // Text size range which the value in data will be mapped to.
31        // Default to have minimum 12px and maximum 60px size.
32
33        sizeRange: [12, 60],
34
35        // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45
36
37        rotationRange: [-90, 90],
38        rotationStep: 45,
39
40        // size of the grid in pixels for marking the availability of the canvas
41        // the larger the grid size, the bigger the gap between words.
42
43        gridSize: 8,
44
45        // set to true to allow word being draw partly outside of the canvas.
46        // Allow word bigger than the size of the canvas to be drawn
47        drawOutOfBound: false,
48
49        // Global text style
50        textStyle: {
51            normal: {
52                fontFamily: 'sans-serif',
53                fontWeight: 'bold',
54                // Color can be a callback function or a color string
55                color: function () {
56                    // Random color
57                    return 'rgb(' + [
58                        Math.round(Math.random() * 160),
59                        Math.round(Math.random() * 160),
60                        Math.round(Math.random() * 160)
61                    ].join(',') + ')';
62                }
63            },
64            emphasis: {
65                shadowBlur: 10,
66                shadowColor: '#333'
67            }
68        },
69
70        // Data is an array. Each array item must have name and value property.
71        data: [{
72            name: 'Farrah Abraham',
73            value: 366,
74            // Style of single text
75            textStyle: {
76                normal: {},
77                emphasis: {}
78            }
79        }]
80    }]
81});