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

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

创新互联建站专业为企业提供新蔡网站建设、新蔡做网站、新蔡网站设计、新蔡网站制作等企业网站建设、网页设计与制作、新蔡企业网站模板建站服务，10年新蔡做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

01 散点图

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

▲图4-17 散点图

代码如下：

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

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

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

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

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

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

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

02 气泡图

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

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

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

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

▲图4-19 气泡图

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

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

网站名称：手把手教你用ECharts画散点图和气泡图
标题来源：http://www.shufengxianlan.com/qtweb/news14/496614.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

静态网站知识

同城分类信息

盐亭网站建设　　 　华川商务　　 　企业官网建设　　 　免备案空间　　 　网站建设方案　　 　正泰动物　　 　网站方案　　 　成都申请ssl证书　　 　娃娃鱼鱼苗　　 　自动门　　 　成都光华机房　　 　成都网站优化　　 　德阳网站建设　　 　全网品牌营销　　 　四川瑞杰　　 　联通机房服务器托管　　 　成都机柜租用　　 　香港虚拟主机　　 　成都商城网站建设　　 　网页设计