巧用EChart画动态饼图
2018.03.29

生物信息学领域算法对于解决复杂生物学问题非常重要,随着NGS的发展对于算法需求也越来越多,同时也伴随着对数据可视化的需求的增加。以下小编将为大家介绍一种非常实用的动态可视化方法---Echarts,一个纯 Javascript 的图表库,可以在PC和移动设备上流畅运行,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

ECharts提供了常规的折线图、柱状图、散点图、饼图、k线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于数据关系可视化的关系图,treemap,多维数据可视化的平行坐标,还有用于BI的漏斗图,仪表盘,并且支持图与图之间的混搭,具体可参考http://echarts.baidu.com/echarts2/doc/example.html。

下面以动态饼图为例介绍Echarts的基本使用。

下面代码为动态饼图代码,拆分为3个部分说明

1、动态可视化是基于网页实现的,因此需要满足静态网页的基本格式(可百度查询)。该部分主要的目的是指定了echarts.js的路径。其他内容可以不变。

1522286012685392.png

2、该步骤目的是准备画板和加载echart模块。

1522286027688408.png

3、该步骤目的导入画图的数据和图片各种属性的设置。可以根据不同需求调整不同参数。

1522286173200495.png1522286201536220.png

1522286079884306.png

1522286079302759.png


代码运行后,结果如下,可双击运行附件显示动态图片。

1522286150597303.png


上图共包括四个部分:

1、标题

2、图形主体

鼠标放在不同颜色区域,可详细展示该颜色和区域表示的数据信息。

3、图例

鼠标单击后颜色变灰,表示不展示该颜色表示的数据类型,同时2中也会去除该颜色对应的部分,并重新计算比例。

4、工具箱

左边按钮表示在线编辑数据,编辑完成后,2中的图形也会发生相应变化;中间按钮表示刷新;右边按钮表示下载图片,默认为png格式。

看了小编上述分享是不是发现自己好像没有全部掌握呀?“料事如神”的小编早有准备,已为大家备好练习材料,只需点击https://github.com/mytangy/bioinfo/blob/master/echarts_pie.html,即可获取资料链接,立即、马上开始行动吧~


在线客服

>>

安诺基因在线客服

客服1 客服2 客服3

电话:400-8986-980