码迷,mamicode.com
首页 > 其他好文 > 详细

寒假学习进度-11(词云图的使用)

时间:2020-02-08 15:15:14      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:ica   ams   ext   mmu   间隔   ott   class   选项   com   

1.

词云图属于 echarts 的扩展。如果想用 echarts 画词云图,需要另外引入 

echarts-wordcloud.min.js。可以从 echarts 官网的下载-》扩展下载中找到。

技术图片

点进去就是字符云的 github 库,在这里下载 echarts-wordcloud.min.js 

示例:

<html>
    <head>
        <meta charset="utf-8">
        <script src=‘https://cdn.bootcss.com/echarts/3.7.0/echarts.simple.js‘></script>
        <script src=‘dist/echarts-wordcloud.js‘></script>
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
            }
        </style>
        <div id=‘main‘></div>
        <script>
            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>
    </body>
</html>

技术图片

属性介绍:

type - 值为 ‘wordCloud‘ 表示画词云图

shape - 词云图词条聚集的形状(难以表述,看图吧),可选项有:circle、cardioid、diamond、triangle-forward、triangle

maskImage - 指定词云图的外形,这里需要传一个形状图片。图标库地址 https://www.iconfont.cn/ 

data - 词云图的数据数组

rotationRange 和 rotationStep  -  词条旋转范围和步长

gridSize -  词条间的空隙大小,数值越大,间隔越大。

top, bottom, left, right  - 词云图的位置

width, height - 词云图占容器的大小

textStyle - 词条样式

寒假学习进度-11(词云图的使用)

标签:ica   ams   ext   mmu   间隔   ott   class   选项   com   

原文地址:https://www.cnblogs.com/liujinxin123/p/12283404.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!