echrts实现词云图
一。下载扩展包
1.进入ecahrts官网，点击下载下的扩展下载子菜单：
2.选择字符云进行下载：
3.克隆或者下载字符云的扩展包：
4.解压缩后，将dist文件夹下其中一个的js源文件引用到项目中：
二。项目源码
前端页面源码如下：
<html>
<head>
<meta charset="utf-8">
<title>EChartstitle>
<script src="js/echarts.min.js">script>
<script src="js/echarts-wordcloud.min.js">script>
head>
<body>
<div id="main" style="width: 100%;height:500px;">div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '高频知识点词云图',
/*subtext: '纯属虚构',*/
left: 'center'
},
tooltip: {},
series: [
{
type : 'wordCloud', //类型为字符云
shape:'smooth', //平滑
gridSize : 8, //网格尺寸
size : ['50%','60%'],
//sizeRange : [ 50, 100 ],
rotationRange : [-45, 0, 45, 90], //旋转范围
textStyle : {
normal : {
fontFamily:'微软雅黑',
color: function() {
return 'rgb(' +
Math.round(Math.random() * 255) +
', ' + Math.round(Math.random() * 255) +
', ' + Math.round(Math.random() * 255) + ')'
}
},
emphasis : {
shadowBlur : 5, //阴影距离
shadowColor : '#333' //阴影颜色
}
},
left: 'center',
top: '-10%',
right: null,
bottom: null,
width:'100%',
height:'100%',
data:[
{value: 335, name: 'Hbase'},
{value: 310, name: 'fastDFS'},
{value: 234, name: 'Kafaka'},
{value: 435, name: 'Vue'},
{value: 1548, name: 'Jquery'},
{value: 310, name: 'MongoDB'},
{value: 1400, name: 'Mysql'},
{value: 1350, name: 'Redis'},
{value: 5548, name: 'Java'},
{value: 350, name: 'Mysql'},
{value: 2010, name: 'Oracle'},
{value: 234, name: 'Redis'},
{value: 2345, name: 'Html'},
{value: 138, name: 'Jquery'},
{value: 310, name: 'CSS'},
{value: 1400, name: 'H5'},
{value: 135, name: 'Aof'},
{value: 253, name: 'Rdb'},
{value: 3135, name: '多线程'},
{value: 305, name: 'JVM虚拟机'},
{value: 2234, name: '进程与线程'},
{value: 435, name: '接口'},
{value: 1580, name: '类'},
{value: 510, name: '多态'},
{value: 3600, name: '散点图'},
{value: 2350, name: '聚点图'},
{value: 650, name: '热点图'}
],
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
script>
body>
html>
（注意：除了引用实现词云图的扩展包外，echarts源码包也需要引用，具体实例参照我的另外一篇博客：使用echarts绘制统计分析图表（动态从后台获取数据））
三。运行效果
运行效果如下：
