对于ECharts官方文档,不要期望一天就能够看完整个文档,并理解文档的所有内容,而应该将文档看成一部参考手册,在使用ECharts绘制图表时,应该知道如何随时快速地查询。 对于ECharts这么庞大的文档,没有必要记忆,也不太可能记忆全部配置项的内容,因此,只需记住几个常用配置项的英文单词,如title、legend、toolbox、tooltip等。在ECharts 4.x的官网中,最为重要的文档为实例、教程、API和配置项手册。
查询ECharts 4.x“文档”菜单中“API”子菜单的步骤如下。 (1)进入ECharts 4.x的官网,开发者使用得最多的就是“文档”菜单。单击“文档”菜单,弹出7个子菜单,其中最为重要的是“教程”“API”“配置项手册”,如图所示。
(2)单击“文档”菜单的子菜单“API”后,“API”界面分为左边的导航区和右边的信息主显示区。单击左边导航区中的链接,就可在右边的信息主显示区中显示该链接所对应的详细内容,如图所示。
查询ECharts 4.x“文档”菜单中的“配置项手册”子菜单时,具体步骤如下。 (1)单击“文档”菜单中的子菜单“配置项手册”;或在已进入“文档”页面后,单击左上角的“配置项”链接,都可以进入“配置项”子界面。“配置项”子界面也分为左边的导航区和右边的信息主显示区。单击左边导航区中的链接,就可在右边的信息主显示区中显示该链接所对应的内容,如图所示。
(2)在对配置项(option)不太熟悉的情况下,可在“配置项手册”界面的左上角的文本框中输入需要查询的配置项(支持模糊查询),按Enter键确认后,ECharts将返回查询结果,并高亮显示所查询到的结果。如图所示,在文本框中输入想要查询的内容“title.textstyle.font”后按Enter键,在文本框的下方会显示已查询到的结果。此处共查询到4条结果(如右边第一个边框所示),并在下面的 信息主显示区高亮显示已查询到的结果(如右边第2、3个边框所示)。
(3)对配置项比较熟悉时,可以通过单击导航窗格中的 图标或 图标展开或收缩左边导航区中的配置项。当鼠标单击某一配置项时,信息显示区会显示其详细内容,如图所示。当鼠标单击“配置项手册”界面左边第二个方框中的“title.textStyle.fontStyle”时,在右上角的方框中会出现对应的解释与说明。
在使用ECharts进行图表开发时,还需要了解ECharts的基础架构和常用术语。
- ECharts的基础架构 如果使用DIV或CSS在浏览器中画图,那么只能画出简单的方框或简单的圆形。当需要画比较复杂的可视化图表时,有两种技术解决方案:Canvas和SVG。Canvas是基于像素点的画图技术,通过各种不同的画图函数,即可在Canvas这块画布上任意作画。 SVG的方式与Canvas完全不同,SVG是基于对象模型的画图技术,通过若干标签组合为一个图表,它的特点是高保真,即使放大也不会有锯齿形失真。使用Canvas和SVG两者画图,各有千秋。
ECharts是基于Canvas技术进行图表绘制的,准确地说,ECharts的底层依赖于轻量级的Canvas类库ZRender 。ZRender 是百度团队开发的,它通过Canvas绘图时会调用Canvas的一些接口。 通常情况下,使用ECharts开发图表时,并不会直接涉及类库ZRender 。ECharts基础架构中的底层基础库,如图所示。
在ECharts基础架构中基础库的上层有3个模块:组件、图类和接口。 组件模块包含坐标轴(axis)、网格(grid)、极坐标(polar)、标题(title)、提示(tooltip)、图例(legend)、数据区域缩放(dataZoom)、值域漫游(dataRange)、工具箱(toolbox)、时间轴(timeline)。 ECharts的图类模块近30种,常用的图类有柱状图(bar)、折线图(line)、散点图(scatter)、K线图(k)、饼图(pie)、雷达图(radar)、地图(map)、仪表盘(gauge)、漏斗图(funnel)。图类与组件共同组成了一个图表,如果只是制作图表的话,只需掌握好图类与组件即可完成80%左右的功能。 另外20%左右的功能涉及更高级的特性。例如,当单击某个图表上某个区域的时候,能跳转到另外一个图表上;或当单击图表上的某个区域时,将展示另外一个区域中的数据,即图表组件的联动效果。此时,需要用到ECharts接口、事件编程。
- ECharts的常用术语 (1)ECharts的基本名词 本书几乎随处会用到ECharts的一些基本名词术语,因此,读者应该先对这些ECharts的基本名词有一个基本印象。 因为在使用ECharts进行图表开发时以英文表达为主,所以需要掌握这些基本名词的英文单词和对应的含义。
ECharts的一些基本名词的简单介绍如表所示
(2)ECharts的图表名词 ECharts的图表开发中,最核心的工作是对配置项(option)属性的设置;在配置项中,最为重要的一个属性是系列(series)中表示图表类型的属性(type)。 因此,需要对ECharts中常见的图表类型有一个大致的了解,特别是记忆图标的英文表述,如折线图(line)、柱状图(bar)、饼图(pie)、散点图(scatter)、雷达图(radar)等。
ECharts图表名词的简单介绍如表所示。