echarts实现词云"/>
echarts实现词云
最终效果图
实现思路：
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=".0.0.min.js"></script><script src="./js/flexble.js"></script>//到官网下载并引入echarts<script src='@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()会出现跨域问题。
更多推荐
echarts实现词云
发布评论