通过上一篇文章可以知道和echarts参考手册可知，series字段就是用来存储我们显示的数据，所以我们只需要用ajax来获取series的值就可以.

option

名称 描述
{color}backgroundColor 全图默认背景，（详见backgroundColor），支持rgba，默认为无，透明
{Array} color 数值系列的颜色列表，（详见color），可配数组，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，当系列数量个数比颜色列表长度大时将循环选取
{boolean}renderAsImage 非IE8-支持渲染为图片，（详见renderAsImage）
{boolean}calculable 是否启用拖拽重计算特性，默认关闭，（详见calculable，相关的还有 calculableColor， calculableHolderColor，nameConnector， valueConnector）
{boolean}animation 是否开启动画，默认开启，（详见 animation，相关的还有 addDataAnimation， animationThreshold，animationDuration， animationDurationUpdate， animationEasing）
{Object} timeline 时间轴（详见timeline），每个图表最多仅有一个时间轴控件
{Object} title 标题（详见title），每个图表最多仅有一个标题控件
{Object} toolbox 工具箱（详见toolbox），每个图表最多仅有一个工具箱
{Object} tooltip 提示框（详见tooltip），鼠标悬浮交互时的信息提示
{Object} legend 图例（详见legend），每个图表最多仅有一个图例，混搭图表共享
{Object}dataRange 值域选择（详见dataRange）,值域范围
{Object}dataZoom 数据区域缩放（详见dataZoom）,数据展现范围选择
{Object}roamController 漫游缩放组件（详见roamController）,搭配地图使用
{Object} grid 直角坐标系内绘图网格（详见grid）
{Array | Object}xAxis 直角坐标系中横轴数组（详见xAxis），数组中每一项代表一条横轴坐标轴，标准（1.0）中规定最多同时存在2条横轴
{Array | Object}yAxis 直角坐标系中纵轴数组（详见yAxis），数组中每一项代表一条纵轴坐标轴，标准（1.0）中规定最多同时存在2条纵轴
{Array} series 驱动图表生成的数据内容（详见series），数组中每一项代表一个系列的特殊选项及数据

首先定义一个Serial类

  1.  /// <summary>
  2.     /// 定义一个Series类 设置其每一组sereis的一些基本属性
  3.     /// </summary>
  4.     class Series
  5.     {
  6.         /// <summary>
  7.         /// sereis序列组id
  8.         /// </summary>
  9.         //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<double> data
  37.         {
  38.             get;
  39.             set;
  40.         }
  41.     }

接着将Serial实例化并将其转化为json格式(必须用大神器：Newtonsoft.Json.dll)，代码如下图

  1.  private  void ShowChart()
  2.     {
  3.         //考虑到图表的series数据为一个对象数组 这里额外定义一个series的类
  4.         List<Series> seriesList = new List<Series>();
  5.  
  6.         Series series1 = new Series();
  7.         series1.name = "actual";
  8.         series1.type = "bar";
  9.         series1.data = new List<double>(){ 26061649.1, 26161649.41, 21782199.14, 27749708.51, 8819500.47, 27711342.26, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00 };
  10.  
  11.         Series series2 = new Series();
  12.         series2.name = "Budget";
  13.         series2.type = "bar";
  14.         series2.data = new List<double>() { 28176503.36, 26161649.41, 21782199.14, 27749708.51, 8819500.47, 27711342.26, 2777777.00, 0.00, 0.00, 0.00, 0.00, 0.00, };
  15.  
  16.         seriesList.Add(series1);
  17.         seriesList.Add(series2);
  18.         var newObj = new
  19.         {
  20.             series = seriesList
  21.         };
  22.  
  23.         string strJson = ToJson(newObj);
  24.  
  25.         WriteJson(strJson);
  26.     }
  27.  
  28.     public static string ToJson( object obj)
  29.     {
  30.         return NewtonsoftJson(obj);
  31.     }
  32.  
  33.     public static string NewtonsoftJson(object obj)
  34.     {
  35.         return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None);
  36.     }
  37.  
  38.     private static void WriteJson(string str)
  39.     {
  40.         HttpContext.Current.Response.Write(str);
  41.         //HttpContext.Current.Response.ContentType = "text/plain"; //设置MIME格式
  42.         HttpContext.Current.Response.End();
  43.     }

前台代码只需要用ajax来获取值并赋给option的serial属性即可

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     <meta charset="utf-8" />
  5.         <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
  6.         <script type="text/javascript" src="echarts/echarts.js"></script>
  7.  
  8.     </head>
  9.     <body>
  10.         <div id="main" style=" height:400px;"></div>
  11.  
  12.     </body>
  13. </html>
  14.     <script type="text/javascript">
  15.         // 路径配置
  16.         require.config({
  17.             paths: {
  18.                 echarts: 'echarts'
  19.             }
  20.         });
  21.         // 使用
  22.         require(
  23.             [
  24.                 'echarts',
  25.                 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
  26.             ],
  27.             function (ec) {
  28.                 // 基于准备好的dom，初始化echarts图表
  29.                 var myChart = ec.init(document.getElementById('main'));
  30.  
  31.                 var option = {
  32.                     tooltip: {
  33.                         show: true
  34.                     },
  35.                     legend: {
  36.                         data: ['Actual', 'Budget']
  37.                     },
  38.                     xAxis: [
  39.                         {
  40.                             type: 'category',
  41.                             data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  42.                         }
  43.                     ],
  44.                     yAxis: [
  45.                         {
  46.                             type: 'value'//Y轴显示的类型,默认为value
  47.                         }
  48.                     ],
  49.                     series: []
  50.                 };
  51.                 //ajax动态获取数据
  52.                 $.ajax({
  53.                     type: 'post',
  54.                     url: 'ajax.ashx?action=ShowChart',
  55.                     data: {},
  56.                     dataType: 'json',
  57.                     async: false,
  58.                     success: function (result) {
  59.                         if (result) {
  60.                             // 获取json值
  61.                               option.series = result.series;
  62.                             // 为echarts对象加载数据
  63.                                myChart.setOption(option);
  64.                         }
  65.                     },
  66.                     error: function () {
  67.                          alert("Error");
  68.                     }
  69.                 });
  70.  
  71.             }
  72.         );
  73.     </script>

所见即所得

当然，最后奉上源码！

源代码下载

echarts在.Net中使用实例(二) 使用ajax动态加载数据的更多相关文章

  1. Jquery chosen动态设置值实例介绍 select Ajax动态加载数据 设置chosen和获取他们选中的值

    for (var i = 0; i < obj.length; i++) $("#selectnum" + nid).append("<option myid ...

  2. smarty中增加类似foreach的功能自动加载数据方法

    第一步:在Smarty_Compiler.class.php的_compile_tag函数中增加: 复制代码 代码如下: //加载数据的开始标签case 'load': $this->_push ...

  3. echarts官网上的动态加载数据bug被我解决。咳咳/。

    又是昨天,为什么昨天发生了这么多事.没办法,谁让我今天没事可做呢. 昨天需求是动态加载数据,画一个实时监控的折线图.大概长这样. 我屁颠屁颠的把代码copy过来,一运行,caocaocao~bug出现 ...

  4. geotrellis使用（二十三）动态加载时间序列数据

    目录 前言 实现方法 总结 一.前言        今天要介绍的绝对是华丽的干货.比如我们从互联网上下载到了一系列(每天或者月平均等)的MODIS数据,我们怎么能够对比同一区域不同时间的数据情况,采用 ...

  5. 【转】Echarts的使用以及动态加载数据

    一.Echarts的介绍 ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新 ...

  6. echarts系列之动态加载数据

    1.echarts学习前言 最近接触到echarts,发现数据可视化真的是魅力无穷啊,各种变幻的曲线交错,以及‘曼妙’的动画效果真是让人如痴如醉! 下面就来一起欣赏她的美... “ ECharts是中 ...

  7. Android中ListView动态加载数据

    1. 引言: 为了提高ListView的效率和应用程序的性能,在Android应用程序中不应该一次性加载ListView所要显示的全部信息,而是采取分批加载策略,随着用户的滑动,动态的从后台加载所需的 ...

  8. echarts动态加载数据无法更新series 无法更新图表

    最近遇到一个Echarts图表无法动态更新数据的问题 最初我在option中设置series的值为一个数组,想着通过修改数组来动态更新图表,但是没变 化,后来发觉是因为图表数据会和之前的合并 看官方的 ...

  9. 获取ajax动态加载的多个a标签中的 点击的那个a标签对应的值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. jquery自定义对话框alert、confirm和prompt

    jQuery Alert Dialogs,又一个基于jQuery的提示框插件,主要包括Alert.Confirm.prompt这三种,还有一个高级范例,可以在提示框内嵌入HTML语言,可以自定义风格样 ...

  2. javascript实现下雪效果

    原理: 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 ...

  3. VS中如何快捷地给自己的代码添加创建信息注释

    VS中如何快捷地给自己的代码添加创建信息注释 Intro 以下讨论的都是没有使用 GIT 来管理源代码的情况,如果使用 GIT 管理源代码可直接使用VS的Git扩展就不需要考虑以下问题. 什么是创建信 ...

  4. jq样式方法总结

    .html()方法 获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容,具体有3种用法: .html() 不传入值,就是获取集合中第一个匹配元素的HTML内容 .html( ...

  5. sharePoint 2016 弃用和删除的功能

    前言 sharepoint 2016版本正式发布,但是相比较2013版本,还是删除或者准备删除一些功能,我们需要了解一下哪些功能已经被删除掉或者在下一个版本中移除,因为这些可能影响我们现有系统是否能够 ...

  6. iOS所有常见证书，appID,Provisioning Profiles配置说明及制作图文教程

    转自holydancer的CSDN专栏,原文地址:http://blog.csdn.net/holydancer/article/details/9219333 概述: 苹果的证书繁锁复杂,制作管理相 ...

  7. iOS 学习 - 22 异步解析 JSON，使用 FMDB 存储，TableView 显示

    前提是已经知道了有哪些 key 值 Model 类: .h @interface ListModel : NSObject @property (nonatomic, copy)NSString *t ...

  8. ViewController生命周期

    alloc -> initWithNibName -> loadView -> viewDidLoad -> viewWillAppear -> viewDidAppea ...

  9. Top 10 Methods for Java Arrays

    作者:X Wang 出处:http://www.programcreek.com/2013/09/top-10-methods-for-java-arrays/ 转载文章,转载请注明作者和出处 The ...

  10. canvas 绘制圆角矩形

    <!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</ ...