最终效果图
实现思路：
1、前端引入echarts.min.js和echarts-wordcloud.js
实现：
前端代码：
<body>
<section class="mainBox">
<div class="column">
<div class="panel bar">
<h2>词云</h2>
<div class="charts"></div>
<div class="pane-footer"></div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="./js/flexble.js"></script>
//到官网下载并引入echarts
<script src='https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js'></script>
//这里做词云图时需要
<script src='./js/echarts-wordcloud.js'></script>
//引入js代码
<script src="./js/index.js"></script>
</body>
js部分（这里的js的内容就是index.js文件里的内容）
(function(data){
var chart = echarts.init(document.querySelector('.bar .charts'));
$.get('./weibo_hot_word.json',function(data){//引入本地json文件
console.log("data")
console.log(data)
var bseries=[];
data.map(item=>{
console.log("item")
bseries.push({
'name':item.word,
'value': item.weight
})
console.log(bseries)
})
option = {
tooltip: {},
series: [
{
type: 'wordCloud',
gridSize: 2,
sizeRange: [12, 50],
rotationRange: [-90, 90],
shape: 'pentagon',
width: 1000,
height: 1000,
drawOutOfBound: true,
textStyle: {
color:function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
textStyle: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data:bseries,
}
]
}
chart.setOption(option);
})
注意：在vscode中运行index.html文件是，应该运行到open with live server，不然$.get()会出现跨域问题。
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
