一、什么是echarts
ECharts,缩写来自Enterprise Charts,是由百度开发的商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
二、echarts中常用的图表
三、echarts图表基本属性名词说明
名词 | 描述 |
chart | 是指一个完整的图表,如折线图,饼图等“基本”图表类型或由基本图表 组合而成的“混搭”图表,可能包括坐标轴、图例等 |
axis | 直角坐标系中的一个坐标轴,坐标轴可分为类目型、数值型或时间型 |
xAxis | 直角坐标系中的横轴,通常并默认为类目型 |
yAxis | 直角坐标系中的纵轴,通常并默认为数值型 |
grid | 直角坐标系中除坐标轴外的绘图网格,用于定义直角系整体布局 |
legend | 图例,表述数据和图形的关联 |
toolbox | 辅助工具箱,辅助功能,如添加标线,框选缩放等 |
tooltip | 气泡提示框,常用于展现更详细的数据 |
timeline | 时间轴,常用于展现同一系列数据在时间维度上的多份数据 |
series | 数据系列,一个图表可能包含多个系列,每一个系列可能包含多个数据 |
四、echarts图表的基本使用
1. 引入ECharts
ECharts3开始不再强制使用AMD的方式按需引入,那么简单粗暴,直接在官网下载所需ECharts文件,像引入普通JavaScript库一样用script标签引入即可。(需要注意的是:引入echarts.js之前要引入jquery.js)
2. 准备一个具备宽高的DOM容器
3.初始化一个echarts实例
4.指定图表的配置项和数据
5.显示图表
6.动态加载数据
(1)echarts动态加载有多种方式,项目中采用通过前台axaj请求,到后台查询出数据结果后循环遍历到echarts图表当中。
注意要把echarts图表中的option配置项的数据制空(如:data[ ])。
(2)项目中采用的是springmvc框架,需要新建:xxxController类接受前台数据,并且需要返回json格式的数据。
7.下载图表
(1)说明:前台拼装form表单获取echarts图表数据,提交到后台(需特别注意的是下载图表不可采用json+ajax方式提交请求)
(2)说明:后台接受到数据后,解析base64编码,将jsp页面上多个图片插入到excel中
五、echarts图表的API文档
https://echarts.baidu.com/option.html#title