background

Our common word cloud looks like this

UI brainwave (clap head) designed such a word cloud style, the bigger the bubble indicates the higher the heat of the word. How do you do that when you don’t have an off-the-shelf component?

The Echarts diagram is found by searching the documentation, as shown below. It looks a little bit like the bubble word cloud we’re going to implement. Whether bubble word clouds can be implemented by setting properties based on the Echarts diagram.

Key Attribute Settings

{
    type: 'graph'.// Display nodes and relationship data between nodes.
    layout: 'force'.// Use force guided layout
    force: {
        repulsion: 60.// Repulsive factor between nodes.
        edgeLength: 10// The distance between two nodes
    },
    data: {
        name: node.label,// Node name
        symbolSize: node.size*1.5.// Node size
        itemStyle: {// Node color, border size, border color
          color: bgcolor,
          borderColor: color,
          borderWidth: node.size/20.// The border size needs to be dynamically adjusted according to the label weight
        },
        label: {// Label display attributes, label color/label font size
            show: true.fontSize: node.size/4.// The label size needs to be dynamically adjusted according to the label weight
            color: '#fff',}}}Copy the code

Example shows

Copy the code to the Echarts debug tool to run, you can see the implementation.

var rindex = () = > parseInt(Math.random() * 100) % 7;
var mycolor = () = > ['#0239bf'.'#3cd272'.'#f7b500'.'#eac900'.'#00d0ff'.'#00b4c0'.'#2c9d68'][rindex()];
var backgroundColor = () = > ['rgba (2,57,191, 0.4).'rgba (60210114, 0.4).'rgba(247,181,0,0.4)'.'rgba(234,201,0,0.4)'.'rgba (0208255,0.4)'.'rgba (0180192,0.4)'.'rgba (44157104,0.4)'][rindex()]

myChart.showLoading();
$.getJSON(
  ROOT_PATH + '/data/asset/data/npmdepgraph.min10.json'.function (json) {
    myChart.hideLoading();
    myChart.setOption(
      (option = {
        animationDurationUpdate: 1500.animationEasingUpdate: 'quinticInOut'.series: [{layout: 'force'.force: {
                repulsion: 60.edgeLength: 10
            },
            type: 'graph'.// progressiveThreshold: 700,
            data: json.nodes.filter(item= > item.size > 15).map(function (node) {
              let color = mycolor();
              let bgcolor = backgroundColor();
              return {
                id: node.id,
                name: node.label,
                symbolSize: node.size*1.5.itemStyle: {
                  color: bgcolor,
                  borderColor: color,
                  borderWidth: node.size/20,},label: {
                    show: true.fontSize: node.size/4.color: '#fff',}}; }),zoom: 1.center: ['50%'.'50%'].roam: true.edgeSymbol: ['circle'.'arrow']],}}),true); });Copy the code