echrts实现词云图

我会带着你远行 2023-03-04 06:59 62阅读 0赞

## 一。下载扩展包 ##

**1.进入[ecahrts官网][ecahrts]，点击下载下的扩展下载子菜单：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70]

**2.选择字符云进行下载：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 1]

**3.克隆或者下载字符云的扩展包：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 2]

**4.解压缩后，将dist文件夹下其中一个的js源文件引用到项目中：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 3]

## 二。项目源码 ##

**前端页面源码如下：**

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        
        <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绘制统计分析图表（动态从后台获取数据）][echarts]）**

## 三。运行效果 ##

**运行效果如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 4]

[ecahrts]: https://echarts.apache.org/zh/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70]: /images/20230208/0bf002a257184aa3a1088be82e4f8de6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 1]: /images/20230208/35a96c5d675f4525a7e1515629504ee0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 2]: /images/20230208/a4c3c90b012c4a46940e962acc1eae0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 3]: /images/20230208/f5b2a8388b6a4ce2ad32392625662462.png
[echarts]: https://blog.csdn.net/weixin_44009447/article/details/105766878
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 4]: /images/20230208/522172fe97004444ac39bc192b297321.png