echarts词云图

最新推荐文章于 2024-07-25 09:24:40 发布

23_123456

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量119

点赞数 3

文章标签： javascript html

本文链接：https://blog.csdn.net/2202_75544053/article/details/137497681

版权

<!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:'陈ber',value:8848,itemStyle:createRandomItemStyle()},
                        {name:'王一珩',value:6677,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:50000,itemStyle:createRandomItemStyle()},
                        {name:'摔跤王',value:5349,itemStyle:createRandomItemStyle()},
                        {name:'壮壮妈',value:7789,itemStyle:createRandomItemStyle()},
                        {name:'晴天',value:6189,itemStyle:createRandomItemStyle()},
                        {name:'麦芒',value:8782,itemStyle:createRandomItemStyle()},
                        {name:'',value:10049,itemStyle:createRandomItemStyle()},
                    ],
                    
                }]
       };
       myChart.setOption(option);
     }
);
    </script>