preface

In recent work, I have done several large screen projects of data visualization, including word cloud display. In the past, word cloud was used to generate pictures by Python library. This time, I used pure front end realization ~~ (Ctrl+V is really good) ~~, and at the same time, I made a word cloud of microblog hot search and recorded ~

Rely on

  • echarts 4.x
  • Echarts – wordcloud 1.1.3

Echarts-wordcloud is now available in versions 2.0 and 1.x, with 2.0 corresponding to echarts 5.x

The effect

  • Preview the address: www.sblt.deali.cn:9000/weibo_top/

The implementation process

First, create a new HTML~~ (crap) ~~

Since we are using Echarts, we need a div to put the canvas:

<div class="chart" id="chartWordCloud" style="width: 100%; height: 600px;"></div>
Copy the code

Next comes the JS section

The data of weibo hot search used an interface of my previous OneCat project, and the data form was roughly like this:

(The hot search keyword data is calculated by word segmentation after the crawler gets the hot search data of Microblog. It is not precise now. I feel that it should do partof speech analysis and only take out nouns and verbs for statistics, the effect will be better.)

{
    "detail": "Hot search keywords on Weibo"."data": [{"name": "Man"."rank": 1.0."heat": 1552222."count": 1
        },
        {
            "name": "Broadcast room"."rank": 1.0."heat": 1552222."count": 1
        },
        {
            "name": "The rule"."rank": 1.0."heat": 1552222."count": 1}}]Copy the code

It can be seen that the heat, the number of occurrences and the weighted ranking of each hot search keyword have been ~

With the data out of the way, it’s time to render the word cloud

First, you need a function that randomly generates colors to achieve colorful effects

function randomColor() {
    return 'rgb(' + [
        Math.round(Math.random() * 255),
        Math.round(Math.random() * 255),
        Math.round(Math.random() * 255)
    ].join(', ') + ') '
}
Copy the code

Initialize the Echart object

let chart = echarts.init(document.querySelector('#chartWordCloud'))
Copy the code

The following code

fetch(API).then(res= > res.json()).then(res= > {
    let originData = res.data.map(item= > ({
        name: item.name,
        value: item.heat
    }))

    const data = originData.map(val= > ({
        ...val,
        textStyle: {
            normal: {
                color: randomColor()
            }
        }
    }))

    chart.setOption({
        series: [{
            type: 'wordCloud'.shape: 'star'.left: 'center'.top: 'center'.right: null.bottom: null.width: '100%'.height: '100%'.sizeRange: [10.80].rotationRange: [-90.90].rotationStep: 45.gridSize: 8.drawOutOfBound: false.textStyle: {
                normal: {
                    fontFamily: 'sans-serif'.fontWeight: 'normal'
                },
                emphasis: {
                    shadowBlur: 10.shadowColor: '# 333'
                }
            },
            data
        }]
    })
})
Copy the code

Try the effect

I set the shape to be a five-pointed star and it looks like this:

This is round:

If you change it to heart shape, it looks like this * (it doesn’t look like *)

Try a diamond

triangle

The lying triangle

Don’t peel the ~

The functions of each configuration are as follows

  • shape: Word cloud shape, default iscircle, the optional parameters arecardioid 、 diamond 、 triangle-forward 、 triangle 、 star.
  • left top right bottom: Location of the word cloud, default iscenter center.
  • width height: Width and height of the word cloud, default is75% 80%.
  • sizeRange: The font size range of the word cloud. The default is[12, 60]The word cloud will provide raw data according to the datavalueRender the size of the text. Taking the default values as an example,valueThe minimum rendering is12px, the maximum render is60px, and the middle value is proportional to the corresponding value.
  • rotationRange rotationStep: The Angle of the text in the word cloud, the text in the word cloud will be randomrotationRangeRotation Angle within the range, render gradient isrotationStepThe smaller the value, the more kinds of angles appear in the word cloud. In the case of the above parameter, the possible rotation Angle is-90 -45 0 45 90 。
  • gridSize: Spacing of each word in the word cloud.
  • drawOutOfBound: Allows word clouds to render outside the boundary, using default parametersfalseCan, otherwise easy to cause word overlap.
  • textStyle: the style of the text in the word cloud,normalIs the original style,emphasisIs the style of the mouse over the text.

The Demo code

Deali-axy/weibowordCloud-frontend: Microblog word cloud, front-end (github.com)

Address: github.com/Deali-Axy/W…

The resources

  • Echarts-wordcloud component project address: github.com/ecomfe/echa…
  • Blog: segmentfault.com/a/119000002…