echarts如何实现关键词云图

Posted 2020-12-11 yuqingya

百度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();
        });

    }

　

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

       效果图：