Echarts词云图绘制

2301_81170993

已于 2024-04-10 15:54:45 修改

阅读量1.8k

点赞数 11

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

于 2024-04-08 11:27:26 首次发布

本文链接：https://blog.csdn.net/2301_81170993/article/details/137500021

本文介绍了如何使用ECharts库在HTML中创建词云图，包括基本的示例代码展示如何使用默认配置，以及一个更复杂的例子，演示了如何自定义颜色和词的倾斜角度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，什么是词云图？

词云图，也叫文字云，是对网络文本中出现频率较高的“关键词”予以视觉上的突出，出现越多，显示的字体越大，越突出，这个关键词也就越重要。让浏览者通过词云图一眼就可以快速感知最突出的文字，迅速抓住重点，了解主旨。

2，绘制词云图

引入js文件

echarts.js echarts-wordcloud.min.js下载链接：
https://download.csdn.net/download/qq_42092076/16664047

一个简单的 ECharts 词云图示例代码：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
 
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <!-- 引入 ECharts 词云图组件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud/dist/echarts-wordcloud.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));
 
        var option = {
            series: [{
                type: 'wordCloud',
                gridSize: 20,
                sizeRange: [12, 50],
                rotationRange: [-90, 90],
                textStyle: {
                    normal: {
                        color: function () {
                            return 'rgb(' +
                                Math.round(Math.random() * 255) + ',' +
                                Math.round(Math.random() * 255) + ',' +
                                Math.round(Math.random() * 255) + ')';
                        }
                    }
                },
                data: [
                    {name: 'Example', value: 10000},
                    {name: 'ECharts', value: 6181},
                    {name: 'Word Cloud', value: 4386},
                    {name: 'Open Source', value: 4055}
                    // ... 其他词云图数据
                ]
            }]
        };
 
        myChart.setOption(option);
    </script>
</body>
</html>

实现

这段代码创建了一个简单的词云图，其中包含了四个词汇："Example"、"ECharts"、"Word Cloud" 和 "Open Source"，每个词汇的频率由它们的 value 属性表示。你可以根据需要添加更多的数据点来增加词的多样性和频率。

复杂词云图代码示例

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>词云图</title>  
 <!-- 引入ECharts文件 --> 
    <script type="text/javascript" src = "http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript" src="/js/echarts.js"></script>  
</head>  
<body>  
    <div id="main" style="width: 80%;height: 400px;border: 1px solid black"></div>  
</body>    
    <script type="text/javascript">  
 // 使用模块化加载方式
    require.config({
        paths:{echarts:'http://echarts.baidu.com/build/dist'}
    })
    require(
        [
            'echarts',
            'echarts/chart/wordCloud',
        ],
        function(ec){
            var myChart = ec.init(document.getElementById('main'));
            function createRandomItemStyle(){//创建随机颜色
                return{
                    normal:{
                        color:'rgb('+[
                            Math.round(Math.random()*255),
                            Math.round(Math.random()*255),
                            Math.round(Math.random()*255)
                    ].join(',')+')'
                    }
                };
            }
            option = {  
                title:{
                    text:'词云图',
                    link:'',
                },
                backgroundColor:'rgba(128,128,128,0.1)',
                tooltip:{show:true},
                series:[{
                    name:'p1',
                    type:'wordCloud',
                    sizeRange:[100,50000],//最大最小值
                    size:['95%','95%'],//词云图大小
                    textRotation:[0,45,90,135,-45,-90],//词的倾斜角度
                    textPadding:4,
                    autoSize:{enable:true,minSize:2},
                    data:[//词云名称，词云大小，颜色
                        {name:'热爱',value:16884,itemStyle:{normal:{color:'red'}}},
                        {name:'明媚',value:8844,itemStyle:createRandomItemStyle()},
                        {name:'耀眼',value:16644,itemStyle:createRandomItemStyle()},
                        {name:'阳光',value:2244,itemStyle:createRandomItemStyle()},
                        {name:'小红花',value:14844,itemStyle:createRandomItemStyle()},
                        {name:'希望',value:2244,itemStyle:createRandomItemStyle()},
                        {name:'永远',value:1688,itemStyle:createRandomItemStyle()},
                        {name:'散步',value:15552,itemStyle:createRandomItemStyle()},
                        {name:'美好',value:8848,itemStyle:createRandomItemStyle()},
                        {name:'芳草地',value:7788,itemStyle:createRandomItemStyle()},
                        {name:'爱自己',value:5240,itemStyle:createRandomItemStyle()},
                        {name:'祝福',value:12244,itemStyle:createRandomItemStyle()},
                        {name:'陪伴',value:7749,itemStyle:createRandomItemStyle()},
                        {name:'哈哈哈',value:2244,itemStyle:createRandomItemStyle()},
                        {name:'放弃',value:11044,itemStyle:createRandomItemStyle()},
                        {name:'天天开心',value:6749,itemStyle:createRandomItemStyle()},
                        {name:'顺心',value:814,itemStyle:createRandomItemStyle()},
                        {name:'拒绝',value:8349,itemStyle:createRandomItemStyle()},
                        {name:'和',value:7789,itemStyle:createRandomItemStyle()},
                        {name:'撕掉标签',value:6189,itemStyle:createRandomItemStyle()},
                        {name:'^_^',value:2782,itemStyle:createRandomItemStyle()},
                        {name:'嘻嘻',value:261,itemStyle:createRandomItemStyle()},
                    ]
                }]
       };
       myChart.setOption(option);
     }
);
    </script>