引入
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();
});
效果图是在官网截取的,代码和效果图不是完全匹配,但是大概的样子应该差不多