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

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

[[403872]]

本文转载自微信公众号「大数据DT」,作者王大伟。转载本文请联系大数据DT公众号。

01 散点图

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

▲图4-17 散点图

代码如下:

  1. option = { 
  2.     xAxis: {}, 
  3.     yAxis: {}, 
  4.     series: [{ 
  5.         data: [ 
  6.             [2.0, 8.04], 
  7.             [3.0, 6.95], 
  8.             [23.0, 7.58], 
  9.             [18.0, 8.81], 
  10.             [12.0, 8.33], 
  11.             [4.0, 9.96], 
  12.             [16.0, 7.24], 
  13.             [14.0, 4.26], 
  14.             [12.0, 10.84], 
  15.             [10.0, 4.82], 
  16.             [7.0, 5.68] 
  17.         ], 
  18.         type: 'scatter' 
  19.     }] 
  20. }; 

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

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

  1. option = { 
  2.     xAxis: {}, 
  3.     yAxis: {}, 
  4.     legend: { 
  5.         data: ['类别1','类别2'
  6.     }, 
  7.     series: [{ 
  8.         name'类别1'
  9.         data: [ 
  10.             [2.0, 8.04], 
  11.             [3.0, 6.95], 
  12.             [23.0, 7.58], 
  13.             [18.0, 8.81], 
  14.             [12.0, 8.33], 
  15.             [4.0, 9.96], 
  16.             [16.0, 7.24], 
  17.             [14.0, 4.26], 
  18.             [12.0, 10.84], 
  19.             [10.0, 4.82], 
  20.             [7.0, 5.68] 
  21.         ], 
  22.         type: 'scatter' 
  23.     }, 
  24.     { 
  25.         name'类别2'
  26.         data: [ 
  27.             [1.0, 2.04], 
  28.             [2.0, 15.95], 
  29.             [26.0, 17.58], 
  30.             [13.0, 7.81], 
  31.             [22.0, 5.33], 
  32.             [14.0, 9.96], 
  33.             [6.0, 4.24], 
  34.             [4.0, 4.26], 
  35.             [22.0, 13.84], 
  36.             [16.0, 14.82], 
  37.             [17.0, 15.68] 
  38.     ], 
  39.         type: 'scatter' 
  40.     } 
  41.     ] 
  42. }; 

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

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

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

02 气泡图

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

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

  1. option = { 
  2.     xAxis: {}, 
  3.     yAxis: {}, 
  4.     legend: { 
  5.         data: ['类别1','类别2'
  6.     }, 
  7.     series: [{ 
  8.         name'类别1'
  9.         data: [ 
  10.             [2.0, 8.04, 10], 
  11.             [3.0, 6.95, 20], 
  12.             [23.0, 7.58, 30], 
  13.             [18.0, 8.81, 15], 
  14.             [12.0, 8.33, 16], 
  15.             [4.0, 9.96, 5], 
  16.             [16.0, 7.24, 18], 
  17.             [14.0, 4.26, 35], 
  18.             [12.0, 10.84, 20], 
  19.             [10.0, 4.82, 50], 
  20.             [7.0, 5.68, 13] 
  21.         ], 
  22.         symbolSize: function (data) { 
  23.             return data[2]; 
  24.         }, 
  25.         type: 'scatter' 
  26.     }, 
  27.     { 
  28.         name'类别2'
  29.         data: [ 
  30.             [1.0, 2.04], 
  31.             [2.0, 15.95], 
  32.             [26.0, 17.58], 
  33.             [13.0, 7.81], 
  34.             [22.0, 5.33], 
  35.             [14.0, 9.96], 
  36.             [6.0, 4.24], 
  37.             [4.0, 4.26], 
  38.             [22.0, 13.84], 
  39.             [16.0, 14.82], 
  40.             [17.0, 15.68] 
  41.     ], 
  42.         type: 'scatter' 
  43.     } 
  44.     ] 
  45. }; 

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

▲图4-19 气泡图

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

 

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

 

责任编辑:武晓燕 来源: 大数据DT
相关推荐

2021-01-21 09:10:29

ECharts柱状图大数据

2021-01-08 10:32:24

Charts折线图数据可视化

2021-01-27 21:55:13

代码参数值ECharts

2021-08-09 13:31:25

PythonExcel代码

2022-10-19 14:30:59

2011-03-28 16:14:38

jQuery

2021-02-06 14:55:05

大数据pandas数据分析

2021-02-04 09:00:57

SQLDjango原生

2020-12-14 08:05:28

Javascript随机canvas

2022-08-04 10:39:23

Jenkins集成CD

2009-04-22 09:17:19

LINQSQL基础

2021-05-10 06:48:11

Python腾讯招聘

2012-01-11 13:40:35

移动应用云服务

2021-08-02 23:15:20

Pandas数据采集

2021-12-11 20:20:19

Python算法线性

2020-03-08 22:06:16

Python数据IP

2021-02-02 13:31:35

Pycharm系统技巧Python

2017-10-27 10:29:35

人脸识别UbuntuPython

2021-05-08 08:04:05

Python爬取素材

2009-08-27 18:10:58

PHP绘制3D图形
点赞
收藏

51CTO技术栈公众号