Echarts 词云图

引入 echarts.js 和 echarts-wordcloud.js

/* 必须有宽高 */
.chart {
  width: 400px;
  height: 300px;
}

<div class="chart">div>

// 1. 初始化实例
let cloud_chart = echarts.init(document.querySelector(".chart"));

// 2. 指定配置和数据
let keywords = [
	{"visualMap": 22199},
    {"continuous": 10288},
    {"contoller": 620},
    {"series": 274470},
    {"gauge": 12311},
    {"detail": 1206},
    {"piecewise": 4885},
    {"textStyle": 32294},
    {"markPoint": 18574},
    {"pie": 38929},
    {"roseType": 969},
    {"label": 37517},
    {"emphasis": 12053},
    {"yAxis": 57299},
    {"name": 15418},
    {"type": 22905},
    .......
];

let cloud_option = {
  title: {
    text: '搜索指数',
    x: 'center',
    textStyle: {
      color: '#fff'
    }
  },
  series: [{
  	// 类型
    type: 'wordCloud',
    data: keywords,
    gridSize: 6,
    //size: ['9%', '99%'],
    // 字体大小范围
    sizeRange: [12, 50],
    // textRotation: [0, 45, 90, -45],
    // 旋转角度
    rotationRange: [-45, 0, 45, 90],
    //shape: 'circle',
    // textPadding: 0,
    // autoSize: {
    //   enable: true,
    //   minSize: 6
    // },
    textStyle: {
      // 字体颜色随机
      normal: {
        color: function () {
          return 'rgb(' +
              Math.round(Math.random() * 255) + ',' +
              Math.round(Math.random() * 255) + ',' +
              Math.round(Math.random() * 255)
        }
      },
      // 鼠标移入时显示的样式
      emphasis: {
        shadowBlur: 10,
        shadowColor: '#bfbfbf'
      }
    },
    // 调整位置和大小
    top: '15%',
    width: '85%',
    height: '85%',

  }]
};

// 3. 把配置给实例对象
cloud_chart.setOption(cloud_option);

// 4. 自适应页面宽度
window.addEventListener("resize", function () {
  cloud_chart.resize();
});

效果图是在官网截取的，代码和效果图不是完全匹配，但是大概的样子应该差不多