Echarts的使用
2016-03-30 13:58
204 查看
前一段时间一直都挺忙的,各种事,也没来得及每周的总结,趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下,趁着周末跟大家分享一下。之前写过一篇相关的文章,当时主要是讲了如何引入、使用Echart,最新的Echart版本已经发布,之前讲的很多文件都可以删除了,下边会一一给大家细讲。
为了更好的讲解如何使用这个图形渲染插件,我会通过创建一个解决方案的形式一点点给大家讲解清楚。
![](https://images0.cnblogs.com/i/337981/201403/310919094072372.png)
之前的一篇文章中讲到如果要使用Echarts还要下载相关的ZRender的渲染包,最新的版本已经将这些合并在一起了,只需要引用图中红框标注的echarts文件夹下的文件即可。各文件的作用如下:
l Echarts-map.js :主要用来渲染跟地图相关
l Echarts.js :基本的常规图形相关
l Esl.js :图像引擎
Statics文件夹下的ECharts.js文件,为我自己抽象总结出来的用于Echarts的配置文件加载、数据处理、初始化各种图像类型的配置、图像渲染的一些方法。
?
2.1 Echarts配置文件的引入
在开始使用时,首先需要引入Echarts 的配置文件,也就是要加载基本的图像类型,我们可以在每一个页面都引入,但是这样抽象化程度不高,重复使用率也不高,只需要有一个配置项在每次引用的时候加载一下即可,对应到具体的代码实现,如下:
?
Result1=[{name:XXX,value:XXX},{name:XXX,value:XXX}….]
Result2=[{name:XXX,group:XXX,value:XXX},{name:XXX,group:XXX,value:XXX]
具体的代码实现如下:
+ View Code?
?
2.3 各种图表类型的配置初始化
在通过2.2步骤将从后台获得的数据进行初始化之后,我们就可以进行图表的option的配置了,在这里我主要对常用的饼图、柱图(单一、分组、堆积柱图)、折线图(分组、堆积折线图)、柱图+折线(增幅)图、中国地图等图进行了配置项的初始化。具体实现如下:
+ View Code?
?
3. 具体页面的使用
经过2步骤中的一些列的配置、处理、初始化,我们就可以具体的使用了,在每一个aspx页面使用之前,我们首先需要在页面的标题引入以下的文件:
?
引入之后就可进行使用了,下面演示几个常用的图表的使用:
首页每个aspx页面上都有一个div用来做渲染图表的容器,如下:
<div id="echart" style="width:100%; height:400px;"></div>
![](https://images0.cnblogs.com/i/337981/201403/301932262975052.jpg)
3.2.2展示效果
![](https://images0.cnblogs.com/i/337981/201403/301933299696270.jpg)
![](https://images0.cnblogs.com/i/337981/201403/301933512508672.png)
3.3.2展示效果
![](https://images0.cnblogs.com/i/337981/201403/301934312665330.jpg)
![](https://images0.cnblogs.com/i/337981/201403/301934427035525.jpg)
![](https://images0.cnblogs.com/i/337981/201403/301935287347688.jpg)
![](https://images0.cnblogs.com/i/337981/201403/301935497348303.jpg)
到这里,基本就把echart的抽象跟使用讲完了,因为时间的关系,还有一些图形的配置、数据处理没有列出代码,但是基本上实现都差不多。希望能给大家带来一些帮助和启发。后续会继续推出HightCharts的抽象使用,敬请期待。
为了更好的讲解如何使用这个图形渲染插件,我会通过创建一个解决方案的形式一点点给大家讲解清楚。
1. EChart最新的文档目录。
首先创建一个解决方案,目录如下:![](https://images0.cnblogs.com/i/337981/201403/310919094072372.png)
之前的一篇文章中讲到如果要使用Echarts还要下载相关的ZRender的渲染包,最新的版本已经将这些合并在一起了,只需要引用图中红框标注的echarts文件夹下的文件即可。各文件的作用如下:
l Echarts-map.js :主要用来渲染跟地图相关
l Echarts.js :基本的常规图形相关
l Esl.js :图像引擎
Statics文件夹下的ECharts.js文件,为我自己抽象总结出来的用于Echarts的配置文件加载、数据处理、初始化各种图像类型的配置、图像渲染的一些方法。
2. 抽象之后的Echarts。
根据Echarts官网的讲解,我把Echarts的使用归结为一下的几个步骤,同时这些步骤相应的实现对应到Statics文件夹下的Echarts.js,该文件的主要代码目录如下:?
2.1 Echarts配置文件的引入
在开始使用时,首先需要引入Echarts 的配置文件,也就是要加载基本的图像类型,我们可以在每一个页面都引入,但是这样抽象化程度不高,重复使用率也不高,只需要有一个配置项在每次引用的时候加载一下即可,对应到具体的代码实现,如下:
?
2.2 数据格式化
为了能够更好的展现各种的数据,在进行图表的option配置之前,需要先对从后台请求过来的数据进行格式化。后台返回的数据必须是json格式的数据,且数据类型只能为以下两种类型:Result1=[{name:XXX,value:XXX},{name:XXX,value:XXX}….]
Result2=[{name:XXX,group:XXX,value:XXX},{name:XXX,group:XXX,value:XXX]
具体的代码实现如下:
+ View Code?
?
2.3 各种图表类型的配置初始化
在通过2.2步骤将从后台获得的数据进行初始化之后,我们就可以进行图表的option的配置了,在这里我主要对常用的饼图、柱图(单一、分组、堆积柱图)、折线图(分组、堆积折线图)、柱图+折线(增幅)图、中国地图等图进行了配置项的初始化。具体实现如下:
+ View Code?
2.4 图形的渲染
在配置好图表类型的option之后,就可进行图表的渲染了,具体的代码实现如下:?
3. 具体页面的使用
经过2步骤中的一些列的配置、处理、初始化,我们就可以具体的使用了,在每一个aspx页面使用之前,我们首先需要在页面的标题引入以下的文件:
?
引入之后就可进行使用了,下面演示几个常用的图表的使用:
首页每个aspx页面上都有一个div用来做渲染图表的容器,如下:
<div id="echart" style="width:100%; height:400px;"></div>
3.1 饼图
3.1.1 实现代码
?3.1.2 展示效果
![](https://images0.cnblogs.com/i/337981/201403/301932262975052.jpg)
3.2 柱图
3.2.1 实现代码
?3.2.2展示效果
![](https://images0.cnblogs.com/i/337981/201403/301933299696270.jpg)
![](https://images0.cnblogs.com/i/337981/201403/301933512508672.png)
3.3 折线图
3.3.1 实现代码
?3.3.2展示效果
![](https://images0.cnblogs.com/i/337981/201403/301934312665330.jpg)
![](https://images0.cnblogs.com/i/337981/201403/301934427035525.jpg)
3.4 柱图+折线(增幅)图
3.4.1 展示效果
![](https://images0.cnblogs.com/i/337981/201403/301935287347688.jpg)
3.5 地图
3.5.3 展示效果
![](https://images0.cnblogs.com/i/337981/201403/301935497348303.jpg)
到这里,基本就把echart的抽象跟使用讲完了,因为时间的关系,还有一些图形的配置、数据处理没有列出代码,但是基本上实现都差不多。希望能给大家带来一些帮助和启发。后续会继续推出HightCharts的抽象使用,敬请期待。
相关文章推荐
- windows环境phpstorm调试环境搭建
- iOS,面试必看,最全梳理
- eclipse插件地址
- synchronized 关键字的体验
- [POJ]1811Prime Test 做题笔记
- C++ 移动赋值运算符
- 多处@Override错误
- PHP语言中cookie的作用
- 查看maven项目的依赖关系 mvn dependency:tree
- php函数方法知识
- android批量上传图片(模仿QQ空间和微信发表说说)
- ORM与hibernate概述
- [BZOJ1588]营业额统计(平衡树splay)
- c++ 移动构造函数
- GearVR开发之系列问题一
- Linux主分区,扩展分区,逻辑分区的联系和区别
- [torch]parallel
- PHP基础整理1
- java读取单个文件名,main方法测试
- Activity中得到新打开Activity关闭后返回的数据(onActivityResult和setResult方法的使用)