温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何利用ECharts画散点图和气泡图

发布时间:2021-06-15 15:23:28 来源:亿速云 阅读:680 作者:chen 栏目:web开发

这篇文章主要讲解了“如何利用ECharts画散点图和气泡图”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何利用ECharts画散点图和气泡图”吧!

01 散点图

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

如何利用ECharts画散点图和气泡图

▲图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所示。

如何利用ECharts画散点图和气泡图

▲图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) {             return data[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的气泡大小相同,为一般散点图。

如何利用ECharts画散点图和气泡图

▲图4-19 气泡图

感谢各位的阅读,以上就是“如何利用ECharts画散点图和气泡图”的内容了,经过本文的学习后,相信大家对如何利用ECharts画散点图和气泡图这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI