Echarts图表的基本用法

一、什么是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