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

发布时间：2020-12-16 02:05:13 所属栏目：百科来源：网络整理

导读：http://www.stepday.com/topic/?906 [ 摘要 ]：最近不要ECharts图表使用者的初学者均在询问如何通过ajax异步获取数据，动态赋值给echarts图表对象，因为这样一来，我们就可以实现图表数据动态呈现，后期加入时间戳即可实时刷新图表数据。正是基于这样一个环

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解决方案的大致文件结构：

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

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

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

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

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

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

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

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

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

1、引入相关js文件

 
    view source 
    print 
    ? 
   
    1. 
    <scriptsrc="js/jquery.min.js"type"text/javascript"></script> 
   
    2. 
    "js/esl.js"> 
   
    3. 
    "js/echarts.js">

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

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

 
    
    divid"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. ],92)">08. DrawEChart//异步加载的回调函数绘制图表

09. );

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

4、编写回调函数DrawEChart

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

varmyChart;

 
    
    //创建ECharts图表方法 
   
 
    
    functionDrawEChart(ec) { 
   
 
    
    //--- 折柱 --- 
   
 
    
    myChart = ec.init(document.getElementById('main')); 
   
 
    
    //图表显示提示信息 
    
    
    myChart.showLoading({ 
    
    
    text:"图表数据正在努力加载..." 
   
 
    
    10. 
    }); 
    
    
    11. 
    //定义图表options 
    
    
    12. 
    options = { 
    
    
    13. 
    title: { 
    
    
    14. 
    "通过Ajax获取数据呈现图标示例" 
    15. 
    subtext:"www.stepday.com"16. 
    sublink:"http://www.stepday.com/myblog/?Echarts" 
    
    
    17. 
    },92)">18. 
    tooltip: { 
    
    
    19. 
    trigger:'axis' 
    
    
    20. 
    21. 
    legend: { 
    
    
    22. 
    data: [] 
    
    
    23. 
    24. 
    toolbox: { 
    
    
    25. 
    show:true26. 
    feature: { 
    
    
    27. 
    mark:false 
    
    
    28. 
    } 
    
    
    29. 
    30. 
    calculable:31. 
    xAxis: [ 
    
    
    32. 
    { 
    
    
    33. 
    type:'category'34. 
    35. 
    } 
    
    
    36. 
    37. 
    yAxis: [ 
    
    
    38. 
    39. 
    'value'40. 
    splitArea: { show:41. 
    42. 
    43. 
    series: [] 
    
    
    44. 
    }; 
    
    
    45. 
     
    
    
    46. 
    //通过Ajax获取数据 
    
    
    47. 
    $.ajax({ 
    
    
    48. 
    "post"49. 
    async:false//同步执行 
    
    
    50. 
    url:"/Ajax/GetChartData.aspx?type=getData&count=12"51. 
    dataType:"json"//返回数据形式为json 
    
    
    52. 
    success:(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:(errorMsg) { 
    
    
    64. 
    alert("不好意思，大爷，图表请求数据失败啦!"); 
    
    
    65. 
    66. 
    67. 
    } 
    
   
  
  
  
  
  
  重点三：Ajax后台服务页面数据返回结构梳理 
  需要返回xAxis的data数据、legend的data数据和series对象数据。为此我们后台这样进行定义数据结构： 
  1、xAxis的data和legend的data均为string类型的数组，所以可以这样定义： 
  
  
 //考虑到图表的category是字符串数组 这里定义一个string的List 
    
    
    List<string> categoryList =new>(); 
    
    
    //考虑到Echarts图表需要设置legend内的data数组为series的name集合这里需要定义一个legend数组 
    
    
    5. 
    > legendList =>(); 
    
   
  
  
  
  2、考虑到series是一个对象包含对象数据结构，我们定义了一个Sereis类，然后Lsit来接收 
  
  
 /// <summary> 
    
    
    /// 定义一个Series类 设置其每一组sereis的一些基本属性 
    
    
    /// </summary> 
    
    
    classSeries 
    
    
    { 
    
    
    /// <summary> 
   
 
    
    /// sereis序列组id 
    
    
    /// </summary> 
    
    
    publicintid 
   
 
    
    get; 
    
    
    set; 
    
    
    /// series序列组名称 
    
    
    name 
    
    
    /// series序列组呈现图表类型(line、column、bar等) 
    
    
    type 
    
    
    /// series序列组的数据为数据类型数组 
    
    
    public> data 
    
    
    } 
    
   
  
  
  
  
  
 //考虑到图表的series数据为一个对象数组 这里额外定义一个series的类 
    
    
    List<Series> seriesList =List<Series>(); 
    
   
  
  
  
  接着就是数据的压入： 
  
  
 _pointCount; 
    
    
    //如果数据非整型 默认给予10个数据 
    
    
    (!.TryParse(pointCount,out_pointCount)) 
    
    
    _pointCount = 10; 
    
    
    //设置legend数组 
    
    
    legendList.Add("Series 1");//这里的名称必须和series的每一组series的name保持一致 
    
    
    //定义一个Series对象 
    
    
    Series seriesObj =Series(); 
    
    
    seriesObj.id = 1; 
    
    
    seriesObj.name =seriesObj.type ="line";//线性图呈现 
    
    
    seriesObj.data =>();//先初始化 不初始化后面直直接data.Add(x)会报错 
    
    
    //设置数据 
    
    
    for(i = 1; i <= _pointCount; i++) 
    
    
    //加入category刻度数组 
    
    
    categoryList.Add(.Format("刻度{0}" 
    //加入数据值series序列数组 这里提供为了效果只提供一组series数据好了 
   
 
    
    seriesObj.data.Add(i);//数据依次递增 
    
    
    //将sereis对象压入sereis数组列表内 
    
    
    seriesList.Add(seriesObj); 
    
   
  
  
  
  
  
  重点四：ajax数据返回梳理 
  ajax返回需要返回三个对象，所以我们用new object的形式封装了这三个对象返回： 
  
  
 //最后调用相关函数将List转换为Json 
    
    
    //因为我们需要返回category和series、legend多个对象 这里我们自己在new一个新的对象来封装这两个对象 
    
    
    var newObj =category = categoryList,monospace">series = seriesList,monospace">legend = legendList 
    
    
    }; 
    
    
    //Response返回新对象的json数据 
    
    
    Response.Write(newObj.ToJson()); 
    
    
    Response.End(); 
    
   
  
  
  
  最终效果图如下所示： 
   
  
  
  Demo下载地址：http://pan.baidu.com/s/1gdyzFNH

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!