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) });