ECharts图表组件中级入门篇:如何通过Ajax异步获取图表数据赋值于图表并渲染呈现

转载 2015年03月17日 14:01:26

http://www.stepday.com/topic/?906

  
原创 [摘要]: 最近不要ECharts图表使用者的初学者均在询问如何通过ajax异步获取数据,动态赋值给echarts图表对象,因为这样一来,我们就可以实现图表数据动态呈现,后期加入时间戳即可实时刷新图表数据。正是基于这样一个环节比较重要,所以我也利用时间专门写了几篇关于如何通过ajax异步获取图表数据并加载的文章。希望可以给初学者解决一些比较实际的问题。文中不妥当之处诚望指出日后并改之。 这里我采用asp.net作为提供ajax后台服务语言,后面会有完整Demo下载。这里我先讲解一下我的asp.net解决方案的大致文件结构: 从上图其实已经可以看出一个大概思路了的。 这里我就讲述几个比较重要的点: 重点一:ECharts图表结构的认识 要动态设置echarts图表数据,我们需要抓住几个重要的属性: ...

最近不要ECharts图表使用者的初学者均在询问如何通过ajax异步获取数据,动态赋值给echarts图表对象,因为这样一来,我们就可以实现图表数据动态呈现,后期加入时间戳即可实时刷新图表数据。正是基于这样一个环节比较重要,所以我也利用时间专门写了几篇关于如何通过ajax异步获取图表数据并加载的文章。希望可以给初学者解决一些比较实际的问题。文中不妥当之处诚望指出日后并改之。

这里我采用asp.net作为提供ajax后台服务语言,后面会有完整Demo下载。这里我先讲解一下我的asp.net解决方案的大致文件结构:

相关asp.net工程文件目录结构图

从上图其实已经可以看出一个大概思路了的。

这里我就讲述几个比较重要的点:

重点一:ECharts图表结构的认识

要动态设置echarts图表数据,我们需要抓住几个重要的属性:

1、xAxis的data:用于设置x轴的刻度之用,类型为字符串数组;

2、legend的data:用于设置图例,data内的字符串数组需要与sereis数组内每一个series的name值对应;

3、sereis的数据:用于设置图表数据之用。series是一个对象嵌套的结构;对象内包含对象;

所以我们要动态设置数据,主要局势设置这三大块。


重点二、前端页面结构梳理

1、引入相关js文件


1.<script src="js/jquery.min.js" type="text/javascript"></script>
2.<script src="js/esl.js" type="text/javascript"></script>
3.<script src="js/echarts.js" type="text/javascript"></script>


2、设置图表容器且设置height和width


1.<!--定义页面图表容器-->
2.<!-- 必须制定容器的大小(height、width) -->
3.<div id="main" style="height: 400px; border: 1px solid #ccc; padding: 10px;">
4.</div>


3、异步加载方式设置图表可能的类型


01.// Step:4 require echarts and use it in the callback.
02.// Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
03.require(
04.[
05.'echarts',
06.'echarts/chart/line' //按需加载图表关于线性图、折线图的部分
07.],
08.DrawEChart //异步加载的回调函数绘制图表
09.);


在请求相关模块的时候,最好与之匹配即可,可以提高加载效率。

4、编写回调函数DrawEChart

回调函数内需要用到ajax同步获取数据


01.var myChart;
02. 
03.//创建ECharts图表方法
04.function DrawEChart(ec) {
05.//--- 折柱 ---
06.myChart = ec.init(document.getElementById('main'));
07.//图表显示提示信息
08.myChart.showLoading({
09.text: "图表数据正在努力加载..."
10.});
11.//定义图表options
12.var options = {
13.title: {
14.text: "通过Ajax获取数据呈现图标示例",
15.subtext: "www.stepday.com",
17.},
18.tooltip: {
19.trigger: 'axis'
20.},
21.legend: {
22.data: []
23.},
24.toolbox: {
25.show: true,
26.feature: {
27.mark: false
28.}
29.},
30.calculable: true,
31.xAxis: [
32.{
33.type: 'category',
34.data: []
35.}
36.],
37.yAxis: [
38.{
39.type: 'value',
40.splitArea: { show: true }
41.}
42.],
43.series: []
44.};
45. 
46.//通过Ajax获取数据
47.$.ajax({
48.type: "post",
49.async: false//同步执行
50.url: "/Ajax/GetChartData.aspx?type=getData&count=12",
51.dataType: "json"//返回数据形式为json
52.success: function (result) {
53.if (result) {                       
54.//将返回的category和series对象赋值给options对象内的category和series
55.//因为xAxis是一个数组 这里需要是xAxis[i]的形式
56.options.xAxis[0].data = result.category;
57.options.series = result.series;
58.options.legend.data = result.legend;
59.myChart.hideLoading();
60.myChart.setOption(options);
61.}
62.},
63.error: function (errorMsg) {
64.alert("不好意思,大爷,图表请求数据失败啦!");
65.}
66.});
67.}



重点三:Ajax后台服务页面数据返回结构梳理

需要返回xAxis的data数据、legend的data数据和series对象数据。为此我们后台这样进行定义数据结构:

1、xAxis的data和legend的data均为string类型的数组,所以可以这样定义:


1.//考虑到图表的category是字符串数组 这里定义一个string的List
2.List<string> categoryList = new List<string>();
3. 
4.//考虑到Echarts图表需要设置legend内的data数组为series的name集合这里需要定义一个legend数组
5.List<string> legendList = new List<string>();


2、考虑到series是一个对象包含对象数据结构,我们定义了一个Sereis类,然后Lsit来接收


01./// <summary>
02./// 定义一个Series类 设置其每一组sereis的一些基本属性
03./// </summary>
04.class Series
05.{
06./// <summary>
07./// sereis序列组id
08./// </summary>
09.public int id
10.{
11.get;
12.set;
13.}
14. 
15./// <summary>
16./// series序列组名称
17./// </summary>
18.public string name
19.{
20.get;
21.set;
22.}
23. 
24./// <summary>
25./// series序列组呈现图表类型(line、column、bar等)
26./// </summary>
27.public string type
28.{
29.get;
30.set;
31.}
32. 
33./// <summary>
34./// series序列组的数据为数据类型数组
35./// </summary>
36.public List<int> data
37.{
38.get;
39.set;
40.}
41.}



1.//考虑到图表的series数据为一个对象数组 这里额外定义一个series的类
2.List<Series> seriesList = new List<Series>();


接着就是数据的压入:


01.int _pointCount;
02.//如果数据非整型 默认给予10个数据
03.if (!int.TryParse(pointCount,out  _pointCount))
04.{
05._pointCount = 10;
06.}
07. 
08.//设置legend数组
09.legendList.Add("Series 1"); //这里的名称必须和series的每一组series的name保持一致
10. 
11.//定义一个Series对象
12.Series seriesObj = new Series();
13.seriesObj.id = 1;
14.seriesObj.name = "Series 1";
15.seriesObj.type = "line"//线性图呈现
16.seriesObj.data = new List<int>(); //先初始化 不初始化后面直直接data.Add(x)会报错
17. 
18.//设置数据
19.for (int i = 1; i <= _pointCount; i++)
20.{
21.//加入category刻度数组
22.categoryList.Add(string.Format("刻度{0}", _pointCount));
23. 
24.//加入数据值series序列数组 这里提供为了效果只提供一组series数据好了               
25.seriesObj.data.Add(i); //数据依次递增
26.}
27.//将sereis对象压入sereis数组列表内
28.seriesList.Add(seriesObj);



重点四:ajax数据返回梳理

ajax返回需要返回三个对象,所以我们用new object的形式封装了这三个对象返回:


01.//最后调用相关函数将List转换为Json
02.//因为我们需要返回category和series、legend多个对象 这里我们自己在new一个新的对象来封装这两个对象
03.var newObj = new {
04.category = categoryList,
05.series = seriesList,
06.legend = legendList
07.};
08.//Response返回新对象的json数据
09.Response.Write(newObj.ToJson());
10.Response.End();


最终效果图如下所示:

最终效果示意图


Demo下载地址:http://pan.baidu.com/s/1gdyzFNH


通过ajax动态加载echarts——简单关系网络实例

因为最近的比赛需要,用到了简单关系网络这个东西。在网上查查找找也是写了有一阵子,今天算是打完收功了。决定写一份笔记来造(huo)福(hai)后人。 echarts给的实例:http://echarts...

echarts+java+ajax实现动态线状图实例

1、html代码+JavaScript代码+ajax调用:  代码如下 复制代码                                 ...

Echarts ajax动态加载json数据

后台php写的,给前台准备好json格式数据 public function actionGetOffline(){ $userid = Yii::$app->user->identi...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

关于echarts和ajax的简单运用

最近有一个很好的机会让我去公司摸鱼。~~ 然后接触了echarts和ajax的运用 刚开始一直没想明白 后面慢慢开始了解起来。 通过springmvc框架下 在control类引入jac...

echarts 动态数据交互实例

最近在学习echarts,找到了很多的资料,找起来比较麻烦,为了方便自己以后的使用,特此做个笔记。 首先是echarts如何使用,要先下载echarts相关的包,我这边提供的是echarts3.0的...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

echarts ajax 动态获取数据

keys 和 values 都是动态数据 注意如果数据是{value:335, name:'直接访问'}这种格式 需要使用eval('(' + strtojson + ')') 转一下//加...
  • CTLLIN
  • CTLLIN
  • 2017年03月17日 15:31
  • 1765

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

echart实现ajax动态数据加载(前台js代码)

var myChart = echarts.init(document.getElementById('main')); // 显示标题,图例和空的坐标轴 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ECharts图表组件中级入门篇:如何通过Ajax异步获取图表数据赋值于图表并渲染呈现
举报原因:
原因补充:

(最多只允许输入30个字)