码迷,mamicode.com
首页 > 其他好文 > 详细

echarts如何实现关键词云图

时间:2020-06-18 19:12:42      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:math   官网   name   导入   mic   百度云   chart   图表   nbsp   

百度Echarts现已更新到4版本,字符云功能现在已经不在Echarts的官方示例中了。通过官网里面也找不到对应的API和具体介绍。

如果需要进行开发的话需要单独引用专门的js文件。

下面是下载的百度云链接:

链接:https://pan.baidu.com/s/1xrNgnr6pd16NL7_vdxBRaQ
提取码:zhze

里面包含两个文件,一个是echarts-wordcloud,另一个是支持词云的echart js文件:echart3.js

页面导入js文件后,首先要在页面中给定一个用来生成词云图的容器:

<div  id="wordcloud_echarts" style="height:90%;"></div>

  然后再js里直接渲染就可以了,跟echarts中的饼图折线图等类似。

       js代码部分:

 var myChart = echarts3.init(document.getElementById(‘wordcloud_echarts‘));
 var keywords = [{"name":"男神","value":2.64},
                 {"name":"好身材","value":4.03},
                 {"name":"校草","value":24.95},
                 {"name":"酷","value":4.04},
                 {"name":"时尚","value":5.27},
                 {"name":"阳光活力","value":5.80},
                 {"name":"初恋","value":3.09},
                 {"name":"英俊潇洒","value":24.71},
                 {"name":"霸气","value":6.33},
                 {"name":"腼腆","value":2.55},
                 {"name":"蠢萌","value":3.88},
                 {"name":"青春","value":8.04},
                 {"name":"网红","value":5.87},
                 {"name":"萌","value":6.97},
                 {"name":"认真","value":2.53},
                 {"name":"古典","value":2.49},
                 {"name":"温柔","value":3.91},
                 {"name":"有个性","value":3.25},
                 {"name":"可爱","value":9.93},
                 {"name":"幽默诙谐","value":3.65}]
                var option = {
				series: [{
					type: ‘wordCloud‘,
					sizeRange: [15, 80],
					rotationRange: [0, 0],
					rotationStep: 45,
					gridSize: 8,
					shape: ‘pentagon‘,
					width: ‘100%‘,
					height: ‘100%‘,
					textStyle: {
						normal: {
							color: function () {
								return ‘rgb(‘ + [
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160)
								].join(‘,‘) + ‘)‘;
							}
						}
					},
					data: keywords
				}]
			};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });

    }

 

       这样的话一个静态数据的词云图就生成了,如果需要后端的时候再写个异步请求得到数据后再渲染词云图就可以啦

       效果图:

                     技术图片

 

echarts如何实现关键词云图

标签:math   官网   name   导入   mic   百度云   chart   图表   nbsp   

原文地址:https://www.cnblogs.com/yuqingya/p/13159077.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!