Echarts词云图

zzzzzyyyyttt

已于 2024-04-08 10:17:38 修改

阅读量141

点赞数 3

文章标签： echarts 前端 javascript

于 2024-04-08 10:15:59 首次发布

本文链接：https://blog.csdn.net/2303_77733754/article/details/137497683

版权

本文介绍了如何使用ECharts库在网页上创建一个动态的词云图，以展示音乐专辑中的歌曲名称及其出现频率，如BTS的单曲名。

摘要由CSDN通过智能技术生成

<!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:'Magic Shop',
                    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:'Love maze',value:16884,itemStyle:{normal:{color:'red'}}},
                        {name:'Love yourself',value:8844,itemStyle:createRandomItemStyle()},
                        {name:'小宇宙',value:16644,itemStyle:createRandomItemStyle()},
                        {name:'J-HOPE',value:2244,itemStyle:createRandomItemStyle()},
                        {name:'Mic Drop',value:14844,itemStyle:createRandomItemStyle()},
                        {name:'Golden',value:2244,itemStyle:createRandomItemStyle()},
                        {name:'Like crazy',value:1688,itemStyle:createRandomItemStyle()},
                        {name:'Layover',value:15552,itemStyle:createRandomItemStyle()},
                        {name:'Just one day',value:8848,itemStyle:createRandomItemStyle()},
                        {name:'Butterfly',value:6677,itemStyle:createRandomItemStyle()},
                        {name:'wings',value:5240,itemStyle:createRandomItemStyle()},
                        {name:'2!3!',value:12244,itemStyle:createRandomItemStyle()},
                        {name:'RM',value:7749,itemStyle:createRandomItemStyle()},
                        {name:'blue&grey',value:2244,itemStyle:createRandomItemStyle()},
                        {name:'JIN',value:11044,itemStyle:createRandomItemStyle()},
                        {name:'SUGA',value:6749,itemStyle:createRandomItemStyle()},
                        {name:'春日',value:50000,itemStyle:createRandomItemStyle()},
                        {name:'v',value:5349,itemStyle:createRandomItemStyle()},
                        {name:'Jk',value:7789,itemStyle:createRandomItemStyle()},
                        {name:'JIMIN',value:6189,itemStyle:createRandomItemStyle()},
                        {name:'Life goes on',value:8782,itemStyle:createRandomItemStyle()},
                        {name:'Run',value:10049,itemStyle:createRandomItemStyle()},
                    ]
                }]
       };
       myChart.setOption(option);
     }
);
    </script>