html页面代码:
<div id="cloud" style="width:300px; height:300px"></div>
<script src="js/echarts.min.js"></script>
<script src="js/echarts-wordcloud.min.js"></script>
<script src="js/cloud.js"></script>
//echarts.min.js和echarts-wordcloud.min.js百度自己下载
cloud.js代码如下:
var cloud = echarts.init(document.getElementById('cloud'));
let data = [{
"name": "美食",
"value": 20,
"link":'http://www.baidu.com'
},
{
"name": "网红店",
"value": 20,
"link":'http://www.ipkd.cn'
},
{
"name": "表彰大会",
"value": 20,
"link":'http://echarts.ipkd.cn'
},
{
"name": "打卡",
"value": 19,
"link":'http://echarts.ipkd.cn'
},
{
"name": "十一长假",
"value": 18,
"link":'http://echarts.ipkd.cn'
},
{
"name": "自由行",
"value": 18,
"link":'http://echarts.ipkd.cn'
},
{
"name": "教师节",
"value": 17,
"link":'http://echarts.ipkd.cn'
},
{
"name": "旅游景点",
"value": 17,
"link":'http://echarts.ipkd.cn'
},
{
"name": "坡子街",
"value": 17,
"link":'http://echarts.ipkd.cn'
},
{
"name": "体育",
"value": 17,
"link":'http://www.ipkd.com'
},
{
"name": "综艺",
"value": 17,
"link":'http://echarts.ipkd.cn'
},
{
"name": "商场",
"value": 17,
"link":'http://echarts.ipkd.cn'
}
]
var option = {
series: [{
type: 'wordCloud',
gridSize: 7,
sizeRange: [15, 40],
rotationRange: [-90, 90],
// rotationStep: 45,
shape: 'circle',
width: '100%',
height: '100%',
drawOutOfBound: true,
textStyle: {
color: function() {
return 'rgb(' + [
Math.round(Math.random() * 250),
Math.round(Math.random() * 250),
Math.round(Math.random() * 250)
].join(',') + ')';
}
},
data: data
}]
};
cloud.setOption(option);
cloud.on('click', function (params) {
window.open(params.data.link)
});