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

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

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

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

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

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

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

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

1、xAxis的data：用于设置x轴的刻度之用，类型为字符串数组；

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

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

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

 

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

1、引入相关js文件

 

<script src="js/jquery.min.js" type="text/javascript"></script>

<script src="js/esl.js" type="text/javascript"></script>

<script src="js/echarts.js" type="text/javascript"></script>

 

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

<!--定义页面图表容器-->

 <!-- 必须制定容器的大小（height、width） -->

 <div id="main" style="height: 400px; border: 1px solid #ccc; padding: 10px;">

 </div>

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

 

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

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

4、编写回调函数DrawEChart

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

view sourceprint?

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",

16.sublink: "http://www.stepday.com/myblog/?Echarts"

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类型的数组，所以可以这样定义：

 

view sourceprint?

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来接收

 

view sourceprint?

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.}

 

 

view sourceprint?

1.//考虑到图表的series数据为一个对象数组 这里额外定义一个series的类

2.List<Series> seriesList = new List<Series>();

 

接着就是数据的压入：

 

view sourceprint?

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的形式封装了这三个对象返回：

 

view sourceprint?

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();