基于echarts的词云

本文介绍了如何利用Echarts3实现词云效果,提供了一张词云的展示效果图,并提供了词云的下载地址链接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基于echarts的词云

内容摘要:基于echarts3的词云。
效果图:
这里写图片描述
词云是基于echarts的扩展,我默认你了解熟悉echarts的格式和实例化方法。
代码如下:

  series: [
    {
   type: 'wordCloud',
        gridSize: 2,
        sizeRange: [12, 50],
        rotationRange: [-90, 90],
        shape: 'pentagon',
        textStyle: {
            normal: {
                color: function () {
                    return 'rgb(' + [
                            Math.round(Math.random() * 255),
                            Math.round(Math.random() * 255),
                            Math.round(Math.random() * 255)
                        ].join(',') + ')';
                }
            },
            emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        data: [
            {
                name: 'Sam S Club',
                value: 10000,
            }, {
                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 ,
                value: 273
            }, {
                name: 'Point Break',
                value: 265
            }]
    }
    ]

词云下载地址:https://github.com/ecomfe/echarts-wordcloud

echarts 是一种基于 JavaScript 的可视化库,用于创建各种交互式图表和图形。其中,echarts demo 是 echarts 提供的一种示例,用于展示图的使用。 是一种以的形式展现数据的可视化方式,根据出现的频率和重要性来调整的大小和颜色,从而直观地展示数据的分布情况。 针对 echarts demo,我们可以通过以下步骤来实现: 首先,引入 echarts 库,并创建一个用于展示图的容器(例如一个 div 元素)。 接着,定义一个数据源,该数据源应包含一系列和其对应的权重(或频率)。例如,可以使用一个数组来存储这些数据。 然后,通过 echarts 的 API 调用,将数据源传入到图中。可以设置图的一些参数,例如最大数、的大小范围、的颜色等。 最后,使用 echarts 提供的渲染函数将图渲染到之前定义的容器中,从而完成图的展示。 除了上述基本的实现步骤,echarts demo 还提供了其他一些功能,例如通过不同的视觉映射来调整的颜色,使图更加生动。此外,在图中还可以加入交互功能,例如点击某个后触发相应的操作。 总之,echarts demo 是通过 echarts 这个可视化库实现的一种图展示方式,通过简单的代码操作,我们可以将数据以一种更直观、更具表现力的方式展示出来。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值