手把手教你用ECharts画散点图和气泡图

手把手教你用ECharts画散点图和气泡图

首页休闲益智三维气泡图更新时间:2024-05-11

导读:散点图是一种基础的可视化图。气泡图和散点图类似,区别是二维散点图展现的是两个维度信息,而二维气泡图可以展现三个维度的信息。

作者:王大伟

来源:华章科技

01 散点图

散点图是一种基础的可视化图,在ECharts中,制作散点图时需要将series中type参数值设置为scatter,一幅简单的散点图如图4-17所示。这里省略了很多组件,感兴趣的读者可以自行查阅。

▲图4-17 散点图

代码如下:

option={ xAxis:{}, yAxis:{}, series:[{ data:[ [2.0,8.04], [3.0,6.95], [23.0,7.58], [18.0,8.81], [12.0,8.33], [4.0,9.96], [16.0,7.24], [14.0,4.26], [12.0,10.84], [10.0,4.82], [7.0,5.68] ], type:'scatter' }] };

需要注意的是,图4-17的散点图是在二维直角坐标系上绘制的,所以每个点需要用两个维度表示,同时要注意data参数中的数据结构,这和之前几种可视化的数据结构差异较大。

我们常常需要将不同类别的散点展现在同一张图中,按照之前几幅图的学习经验,只需要在series中增加新的数据即可,代码如下:

option={ xAxis:{}, yAxis:{}, legend:{ data:['类别1','类别2'] }, series:[{ name:'类别1', data:[ [2.0,8.04], [3.0,6.95], [23.0,7.58], [18.0,8.81], [12.0,8.33], [4.0,9.96], [16.0,7.24], [14.0,4.26], [12.0,10.84], [10.0,4.82], [7.0,5.68] ], type:'scatter' }, { name:'类别2', data:[ [1.0,2.04], [2.0,15.95], [26.0,17.58], [13.0,7.81], [22.0,5.33], [14.0,9.96], [6.0,4.24], [4.0,4.26], [22.0,13.84], [16.0,14.82], [17.0,15.68] ], type:'scatter' } ] };

这里为数据赋予了name参数,所以可以使用legend区分两种散点。

可视化结果如图4-18所示。

▲图4-18 多类别的散点图

02 气泡图

气泡图和散点图类似,区别是二维散点图展现的是两个维度信息,而二维气泡图可以展现三个维度的信息,因为多了一个展示气泡大小的维度信息。

我们修改散点图的代码,在类别1的数据中增加一个维度数据作为气泡大小,这里会使用到function函数功能,函数返回当前气泡信息(三维数据)的第三个维度数据,也就是气泡的大小,需要注意的是,data[2]代表第三维数据,因为是从data[0]开始计算。具体代码如下:

option={ xAxis:{}, yAxis:{}, legend:{ data:['类别1','类别2'] }, series:[{ name:'类别1', data:[ [2.0,8.04,10], [3.0,6.95,20], [23.0,7.58,30], [18.0,8.81,15], [12.0,8.33,16], [4.0,9.96,5], [16.0,7.24,18], [14.0,4.26,35], [12.0,10.84,20], [10.0,4.82,50], [7.0,5.68,13] ], symbolSize:function(data){ returndata[2]; }, type:'scatter' }, { name:'类别2', data:[ [1.0,2.04], [2.0,15.95], [26.0,17.58], [13.0,7.81], [22.0,5.33], [14.0,9.96], [6.0,4.24], [4.0,4.26], [22.0,13.84], [16.0,14.82], [17.0,15.68] ], type:'scatter' } ] };

可视化结果如图4-19所示,类别1的气泡大小不一,而类别2的气泡大小相同,为一般散点图。

▲图4-19 气泡图

关于作者:王大伟,毕业于华东理工大学,硕士学历,目前就职于平安金融壹账通,从事数据挖掘算法工作,擅长ECharts、Python、自然语言处理、数据分析挖掘、机器学习。曾获微软最有价值专家(MVP)荣誉称号。

本文摘编自《ECharts数据可视化:入门、实战与进阶》,经出版方授权发布。

延伸阅读《ECharts数据可视化》

推荐语:ECharts官方推荐,系统全面、由浅入深、注重实操,带领读者快速从新人到高手。

查看全文
大家还看了
也许喜欢
更多游戏

Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved