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]

具体的代码实现如下:

2.3 各种图表类型的配置初始化

在通过2.2步骤将从后台获得的数据进行初始化之后,我们就可以进行图表的option的配置了,在这里我主要对常用的饼图、柱图(单一、分组、堆积柱图)、折线图(分组、堆积折线图)、柱图+折线(增幅)图、中国地图等图进行了配置项的初始化。具体实现如下:

  

  

 

2.4 图形的渲染

在配置好图表类型的option之后,就可进行图表的渲染了,具体的代码实现如下:

经过2步骤中的一些列的配置、处理、初始化,我们就可以具体的使用了,在每一个aspx页面使用之前,我们首先需要在页面的标题引入以下的文件:

引入之后就可进行使用了,下面演示几个常用的图表的使用:

首页每个aspx页面上都有一个div用来做渲染图表的容器,如下:

<div id="echart" style="width:100%; height:400px;"></div>

 

3.1 饼图

3.1.1 实现代码

3.1.2 展示效果

 

3.2 柱图

3.2.1 实现代码

 

 

3.3 折线图

3.3.1 实现代码

 

 

3.4 柱图+折线(增幅)图

3.4.1 展示效果

 

3.5 地图

3.5.3 展示效果

相关内容推荐