【Echarts】使用echarts和echarts-wordcloud生成词云图
- IT业界
- 2025-07-21 18:59:30
一、下载echarts和echarts-wordcloud
地址： download.csdn.net/download/qq_25285531/88663006
可直接下载放在项目中使用
二、词云数据
词云数据是对象的格式，可以从后端获取，这里以下面数据为例
$list3 = array( array('name' => '粉丝团', 'value' => '8'), array('name' => '发热我', 'value' => '15'), array('name' => '天', 'value' => '54'), array('name' => '人', 'value' => '83'), array('name' => '太热', 'value' => '15'), array('name' => 't热', 'value' => '11'), array('name' => '特瑞', 'value' => '65'), array('name' => '太热', 'value' => '65'), array('name' => '亚特人团', 'value' => '65'), array('name' => '东方化工', 'value' => '57'), array('name' => 'h规范', 'value' => '15'), array('name' => 'h规范', 'value' => '95'), array('name' => '粉丝团', 'value' => '90'), array('name' => '好地方', 'value' => '54'), array('name' => '给太热', 'value' => '70'), array('name' => '依托', 'value' => '50'), array('name' => 'y太热', 'value' => '58'), array('name' => '梵蒂冈', 'value' => '88'), array('name' => 'y他', 'value' => '11'), array('name' => '要让他', 'value' => '21'), array('name' => '和', 'value' => '92'), array('name' => '粉广泛的丝团', 'value' => '85'), array('name' => 'iuy', 'value' => '8'), array('name' => '广泛大概', 'value' => '58'), array('name' => 'g放到', 'value' => '75'), array('name' => '范德萨范德萨', 'value' => '55'), array('name' => 'g放到', 'value' => '12'), array('name' => 'r二维图', 'value' => '25'), array('name' => '吧v', 'value' => '15'), array('name' => '哦iu有', 'value' => '75'), array('name' => '哦iu有', 'value' => '65'), array('name' => '广泛的', 'value' => '5'), array('name' => 't热天坛人', 'value' => '55'), array('name' => '发大水了', 'value' => '15'), array('name' => 't热', 'value' => '5'), array('name' => '范德萨', 'value' => '25'), array('name' => '范德萨', 'value' => '55'), array('name' => 'rfew ', 'value' => '25'), array('name' => 'fgd ', 'value' => '35'), array('name' => 'hgf', 'value' => '95'), array('name' => '个人', 'value' => '85'), array('name' => 'y他', 'value' => '5'), array('name' => '范德萨', 'value' => '84'), array('name' => ' 也让', 'value' => '18'), array('name' => '范德萨', 'value' => '19'), array('name' => '烦烦烦', 'value' => '62'), );三、生成词云
可以根据属性去修改词云的配置项，以达到自己想要的效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> html, body, #main { width: 100%; height: 100%; margin: 0; } </style> </head> <body> <div class="content"> <div class="main left" > <div id="main" style="width:640px;height:500px;"></div> </div> </div> <script src="/newadmin/js/jquery-1.12.3.min.js" charset="utf-8"></script> <script src="/newadmin/js/echarts.min.js" charset="utf-8"></script> <script src="/newadmin/echarts-wordcloud/echarts-wordcloud.min.js"></script> <script> var myChart = echarts.init(document.getElementById('main')); // 异步加载数据 $.get("xxxxxx").done(function (res) { var data = res.data //后端传回来的数据 var option = { backgroundColor:'#193762', series: [ { type: 'wordCloud', sizeRange: [15, 30], // 用来调整字的大小范围 rotationRange: [-30, 30], 每个词旋转的角度范围和旋转的步进 gridSize: 10, // 用来调整词之间的距离 shape: 'pentagon',// shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆 width: '100%' , height: '100%', left: 'center', top: 'center', drawOutOfBound: false,//溢出是否显示 autoSize: { enable: true, minSize: 4 }, layoutAnimation: true,// 布局的时候是否有动画 keepAspect: true, textStyle: { normal: { color: function(v) { // console.log(v.data) if (v.data.value < 60) { return '#FF5722'; }else if (60 <= v.data.value && v.data.value < 80) { return '#FFB800'; }else if (80 <= v.data.value && v.data.value <= 100) { return '#1E9FFF'; } }, fontWeight: '550' } }, data: data } ] }; if (option && typeof option === 'object') { myChart.setOption(option); } window.addEventListener('resize', myChart.resize); } </script> </body> </html>四、效果图
不同的数值用不同的颜色标识
【Echarts】使用echarts和echarts-wordcloud生成词云图由讯客互联IT业界栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“【Echarts】使用echarts和echarts-wordcloud生成词云图”
