Echarts数据可视化第4章 Echarts可视化图 4.13 词云图

分手后的思念是犯贱 2024-03-25 20:18 70阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第4章 Echarts可视化图
         *   *  4.13 词云图

> Echarts数据可视化：入门、实战与进阶

#### 第4章 Echarts可视化图 ####

##### 4.13 词云图 #####

词云图是一种将文本数据可视化，用词汇组成类似云的可视化图。一般在词云图中，显示越大的词语的重要程度越大，这也是词云图的作用，将文本中重要的词语和信息突出显示。

举个栗子：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>词云图</title>
        <script src="../js/echarts.js"></script>
        <script src="../dist/echarts-wordcloud.js"></script>
    </head>
    <body>
    
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        option = {
          
            tooltip: {
          
                show: true
            },
            series: [
                {
          
                    type: 'wordCloud', //词云图
                    gridSize: 6, //词的间距
                    shape: 'circle', //词云形状，可选diamond，pentagon，circle，triangle，star等形状
                    sizeRange: [12, 45], //词云大小范围
                    width: 900, //词云显示宽度
                    height: 500, //词云显示高度
                    textStyle: {
          
                        normal: {
          
                            color: function () {
          
                                //词云的颜色随机
                                return (
                                    'rgb(' +
                                    [
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160)
                                    ].join(',') +
                                    ')'
                                );
                            }
                        },
                        emphasis: {
          
                            shadowBlur: 10, //阴影的模糊等级
                            shadowColor: '#333' //鼠标悬停在词云上的阴影颜色
                        }
                    },
                    data: [
                        {
          
                            name: ' 没有',
                            value: 30
                        },
                        {
          
                            name: ' 屏幕',
                            value: 24
                        },
                        {
          
                            name: ' 不错',
                            value: 21
                        },
                        {
          
                            name: ' 可以',
                            value: 19
                        },
                        {
          
                            name: ' 发货',
                            value: 18
                        },
                        {
          
                            name: ' 这个',
                            value: 18
                        },
                        {
          
                            name: ' 什么',
                            value: 17
                        },
                        {
          
                            name: ' 一个',
                            value: 12
                        },
                        {
          
                            name: ' 不好',
                            value: 12
                        },
                        {
          
                            name: ' 质量',
                            value: 11
                        },
                        {
          
                            name: ' 快递',
                            value: 11
                        },
                        {
          
                            name: ' 问题',
                            value: 10
                        },
                        {
          
                            name: ' 物流',
                            value: 9
                        },
                        {
          
                            name: ' 几天',
                            value: 9
                        },
                        {
          
                            name: ' 一般',
                            value: 9
                        },
                        {
          
                            name: ' 就是',
                            value: 9
                        },
                        {
          
                            name: ' 使用',
                            value: 8
                        },
                        {
          
                            name: ' 怎么',
                            value: 8
                        },
                        {
          
                            name: ' 电池',
                            value: 8
                        },
                        {
          
                            name: ' 不能',
                            value: 8
                        },
                        {
          
                            name: ' 速度',
                            value: 8
                        },
                        {
          
                            name: ' 客服',
                            value: 8
                        },
                        {
          
                            name: ' 一星',
                            value: 8
                        },
                        {
          
                            name: ' 拍照',
                            value: 8
                        },
                        {
          
                            name: ' 摄像头',
                            value: 7
                        }
                    ]
                }
            ]
        };
    
    
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    </body>
    </html>

浏览器渲染效果

![在这里插入图片描述][459e1a3afc8846e89feb2c848f78dca8.png_pic_center]

代码中，series 的type 参数值设置为wordCloud，data中的内容为显示词语的名称和权重大小。

[459e1a3afc8846e89feb2c848f78dca8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ce07bf433e6043da809cf84292c803da.png