Echarts詞雲wordcloud實踐

官方地址https://github.com/ecomfe/echarts-wordcloud

demo展示地址https://www.guanacossj.com/JiaBlog/contact-us/

效果

引用

<script src="..echarts-wordcloud.js"></script>
<script src="..echarts-wordcloud.min.js"></script>
<script src="..echarts.js"></script>

特別注意，echarts-wordcloud只支持echarts3.x版本，目前官網上都是echarts4.x版本的，需要的可以私聊我 

繪製

div class="commentlist" style="height: 300px;" id="mycloud"></div>
    <script>
        $(function(){
            echartsCloud();
        });
        function echartsCloud(){
            var myChart = echarts.init(document.getElementById('mycloud'));
            myChart.setOption({
                title: {
                    text: ''
                },
                tooltip: {},
                series: [{
                    type : 'wordCloud',  //類型爲字符雲
                        shape:'smooth',  //平滑
                        gridSize : 8, //網格尺寸
                        size : ['50%','50%'],
                        //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: 'center',
                        right: null,
                        bottom: null,
                        width:'100%',
                        height:'100%',
                        data:[
                            {"name": "帥","value": "756"},
                            {"name": "太帥了","value": "701"},
                            {"name": "超級帥","value": "622"},
                            {"name": "超級無敵帥","value": "579"},
                            {"name": "請叫我算術嘉","value": "525"},
                            {"name": "python3.6","value": "479"},
                            {"name": "Tensorflow2.0","value": "443"},
                            {"name": "Django2.2","value": "386"},
                            {"name": "Spring Boot","value": "345"},
                            {"name": "單身狗","value": "327"},
                            {"name": "天才和小可愛","value": "298"},
                            {"name": "Pytorch1.0","value": "256"},
                            {"name": "Casio","value": "213"},
                            {"name": "波霸奶茶少冰七分糖","value": "188"},
                            {"name": "Nginx","value": "178"},
                            {"name": "可口可樂","value": "171"},
                            {"name": "哈哈哈哈哈","value": "136"},
                            {"name": "taishuaile","value": "114"},
                            {"name": "請叫我算術嘉","value": "98"},
                            {"name": "清風抽紙","value": "75"},
                            {"name": "python","value": "46"},
                            {"name": "NJUPT","value": "38"},
                            {"name": "ArithmeticJia","value": "26"}],
                        }]
                    });
                }
    </script>