echarts-wordcloud.js字符云插件


echarts-wordcloud.js字符云插件

第一步引入bfwone,将依赖项设置echart

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=echarts&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["echarts-wordcloud"], function() {

                var chart = echarts.init(document.getElementById('main'));

                var option = {
                    tooltip: {},
                    series: [ {
                        type: 'wordCloud',
                        gridSize: 2,
                        sizeRange: [12, 50],
                        rotationRange: [-90, 90],
                        shape: 'pentagon',
                        width: 600,
                        height: 400,
                        drawOutOfBound: true,
                        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: 'Sam S Club',
                            value: 10000,
                            textStyle: {
                                normal: {
                                    color: 'black'
                                },
                                emphasis: {
                                    color: 'red'
                                }
                            }
                        },
                            {
                                name: 'Macys',
                                value: 6181
                            },
                            {
                                name: 'Amy Schumer',
                                value: 4386
                            },
                            {
                                name: 'Jurassic World',
                                value: 4055
                            },
                            {
                                name: 'Charter Communications',
                                value: 2467
                            },
                            {
                                name: 'Chick Fil A',
                                value: 2244
                            },
                            {
                                name: 'Planet Fitness',
                                value: 1898
                            },
                            {
                                name: 'Pitch Perfect',
                                value: 1484
                            },
                            {
                                name: 'Express',
                                value: 1112
                            },
                            {
                                name: 'Home',
                                value: 965
                            },
                            {
                                name: 'Johnny Depp',
                                value: 847
                            },
                            {
                                name: 'Lena Dunham',
                                value: 582
                            },
                            {
                                name: 'Lewis Hamilton',
                                value: 555
                            },
                            {
                                name: 'KXAN',
                                value: 550
                            },
                            {
                                name: 'Mary Ellen Mark',
                                value: 462
                            },
                            {
                                name: 'Farrah Abraham',
                                value: 366
                            },
                            {
                                name: 'Rita Ora',
                                value: 360
                            },
                            {
                                name: 'Serena Williams',
                                value: 282
                            },
                            {
                                name: 'NCAA baseball tournament',
                                value: 273
                            },
                            {
                                name: 'Point Break',
                                value: 265
                            }]
                    }]
                };

                chart.setOption(option);

                window.onresize = chart.resize;

            });
        });
    </script>
</head>
<body>
    <div id="main" style="width: 800px;height:400px;"></div>
</body>
</html>


立即下载echarts-wordcloud.js查看所有js插件

网友评论0

程序员在线工具箱