当前位置:   article > 正文

【Echarts】使用echarts和echarts-wordcloud生成词云图_echarts-worldcloud

echarts-worldcloud

一、下载echarts和echarts-wordcloud

地址:https://download.csdn.net/download/qq_25285531/88663006

可直接下载放在项目中使用

二、词云数据

词云数据是对象的格式,可以从后端获取,这里以下面数据为例

  1. $list3 = array(
  2. array('name' => '粉丝团', 'value' => '8'),
  3. array('name' => '发热我', 'value' => '15'),
  4. array('name' => '天', 'value' => '54'),
  5. array('name' => '人', 'value' => '83'),
  6. array('name' => '太热', 'value' => '15'),
  7. array('name' => 't热', 'value' => '11'),
  8. array('name' => '特瑞', 'value' => '65'),
  9. array('name' => '太热', 'value' => '65'),
  10. array('name' => '亚特人团', 'value' => '65'),
  11. array('name' => '东方化工', 'value' => '57'),
  12. array('name' => 'h规范', 'value' => '15'),
  13. array('name' => 'h规范', 'value' => '95'),
  14. array('name' => '粉丝团', 'value' => '90'),
  15. array('name' => '好地方', 'value' => '54'),
  16. array('name' => '给太热', 'value' => '70'),
  17. array('name' => '依托', 'value' => '50'),
  18. array('name' => 'y太热', 'value' => '58'),
  19. array('name' => '梵蒂冈', 'value' => '88'),
  20. array('name' => 'y他', 'value' => '11'),
  21. array('name' => '要让他', 'value' => '21'),
  22. array('name' => '和', 'value' => '92'),
  23. array('name' => '粉广泛的丝团', 'value' => '85'),
  24. array('name' => 'iuy', 'value' => '8'),
  25. array('name' => '广泛大概', 'value' => '58'),
  26. array('name' => 'g放到', 'value' => '75'),
  27. array('name' => '范德萨范德萨', 'value' => '55'),
  28. array('name' => 'g放到', 'value' => '12'),
  29. array('name' => 'r二维图', 'value' => '25'),
  30. array('name' => '吧v', 'value' => '15'),
  31. array('name' => '哦iu有', 'value' => '75'),
  32. array('name' => '哦iu有', 'value' => '65'),
  33. array('name' => '广泛的', 'value' => '5'),
  34. array('name' => 't热天坛人', 'value' => '55'),
  35. array('name' => '发大水了', 'value' => '15'),
  36. array('name' => 't热', 'value' => '5'),
  37. array('name' => '范德萨', 'value' => '25'),
  38. array('name' => '范德萨', 'value' => '55'),
  39. array('name' => 'rfew ', 'value' => '25'),
  40. array('name' => 'fgd ', 'value' => '35'),
  41. array('name' => 'hgf', 'value' => '95'),
  42. array('name' => '个人', 'value' => '85'),
  43. array('name' => 'y他', 'value' => '5'),
  44. array('name' => '范德萨', 'value' => '84'),
  45. array('name' => ' 也让', 'value' => '18'),
  46. array('name' => '范德萨', 'value' => '19'),
  47. array('name' => '烦烦烦', 'value' => '62'),
  48. );

三、生成词云

可以根据属性去修改词云的配置项,以达到自己想要的效果

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. html, body, #main {
  8. width: 100%;
  9. height: 100%;
  10. margin: 0;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div class="content">
  16. <div class="main left" >
  17. <div id="main" style="width:640px;height:500px;"></div>
  18. </div>
  19. </div>
  20. <script src="/newadmin/js/jquery-1.12.3.min.js" charset="utf-8"></script>
  21. <script src="/newadmin/js/echarts.min.js" charset="utf-8"></script>
  22. <script src="/newadmin/echarts-wordcloud/echarts-wordcloud.min.js"></script>
  23. <script>
  24. var myChart = echarts.init(document.getElementById('main'));
  25. // 异步加载数据
  26. $.get("xxxxxx").done(function (res) {
  27. var data = res.data //后端传回来的数据
  28. var option = {
  29. backgroundColor:'#193762',
  30. series: [ {
  31. type: 'wordCloud',
  32. sizeRange: [15, 30], // 用来调整字的大小范围
  33. rotationRange: [-30, 30], 每个词旋转的角度范围和旋转的步进
  34. gridSize: 10, // 用来调整词之间的距离
  35. shape: 'pentagon',// shape这个属性虽然可配置,但是在词的数量不太多的时候,效果不明显,它会趋向于画一个椭圆
  36. width: '100%' ,
  37. height: '100%',
  38. left: 'center',
  39. top: 'center',
  40. drawOutOfBound: false,//溢出是否显示
  41. autoSize: {
  42. enable: true,
  43. minSize: 4
  44. },
  45. layoutAnimation: true,// 布局的时候是否有动画
  46. keepAspect: true,
  47. textStyle: {
  48. normal: {
  49. color: function(v) {
  50. // console.log(v.data)
  51. if (v.data.value < 60) {
  52. return '#FF5722';
  53. }else if (60 <= v.data.value && v.data.value < 80) {
  54. return '#FFB800';
  55. }else if (80 <= v.data.value && v.data.value <= 100) {
  56. return '#1E9FFF';
  57. }
  58. },
  59. fontWeight: '550'
  60. }
  61. },
  62. data: data
  63. } ]
  64. };
  65. if (option && typeof option === 'object') {
  66. myChart.setOption(option);
  67. }
  68. window.addEventListener('resize', myChart.resize);
  69. }
  70. </script>
  71. </body>
  72. </html>

四、效果图

不同的数值用不同的颜色标识

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/煮酒与君饮/article/detail/878636
推荐阅读
相关标签
  

闽ICP备14008679号