通过上一篇文章可以知道和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类

 /// <summary>

    /// 定义一个Series类 设置其每一组sereis的一些基本属性

    /// </summary>

    class Series

    {

        /// <summary>

        /// sereis序列组id

        /// </summary>

        //public int id

        //{

        //    get;

        //    set;

        //}

        /// <summary>

        /// series序列组名称

        /// </summary>

        public string name

        {

            get;

            set;

        }

        /// <summary>

        /// series序列组呈现图表类型(line、column、bar等)

        /// </summary>

        public string type

        {

            get;

            set;

        }

        /// <summary>

        /// series序列组的数据为数据类型数组

        /// </summary>

        public List<double> data

        {

            get;

            set;

        }

    }

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

 private  void ShowChart()

    {

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

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

        Series series1 = new Series();

        series1.name = "actual";

        series1.type = "bar";

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

        Series series2 = new Series();

        series2.name = "Budget";

        series2.type = "bar";

        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, };

        seriesList.Add(series1);

        seriesList.Add(series2);

        var newObj = new

        {

            series = seriesList

        };

        string strJson = ToJson(newObj);

        WriteJson(strJson);

    }

    public static string ToJson( object obj)

    {

        return NewtonsoftJson(obj);

    }

    public static string NewtonsoftJson(object obj)

    {

        return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None);

    }

    private static void WriteJson(string str)

    {

        HttpContext.Current.Response.Write(str);

        //HttpContext.Current.Response.ContentType = "text/plain"; //设置MIME格式

        HttpContext.Current.Response.End();

    }

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

<!DOCTYPE html>

<html>

    <head>

    <meta charset="utf-8" />

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

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

    </head>

    <body>

        <div id="main" style=" height:400px;"></div>

    </body>

</html>

    <script type="text/javascript">

        // 路径配置

        require.config({

            paths: {

                echarts: 'echarts'

            }

        });

        // 使用

        require(

            [

                'echarts',

                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

            ],

            function (ec) {

                // 基于准备好的dom，初始化echarts图表

                var myChart = ec.init(document.getElementById('main'));

                var option = {

                    tooltip: {

                        show: true

                    },

                    legend: {

                        data: ['Actual', 'Budget']

                    },

                    xAxis: [

                        {

                            type: 'category',

                            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']

                        }

                    ],

                    yAxis: [

                        {

                            type: 'value'//Y轴显示的类型,默认为value

                        }

                    ],

                    series: []

                };

                //ajax动态获取数据

                $.ajax({

                    type: 'post',

                    url: 'ajax.ashx?action=ShowChart',

                    data: {},

                    dataType: 'json',

                    async: false,

                    success: function (result) {

                        if (result) {

                            // 获取json值

                              option.series = result.series;

                            // 为echarts对象加载数据

                               myChart.setOption(option);

                        }

                    },

                    error: function () {

                         alert("Error");

                    }

                });

            }

        );

    </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. 【工业串口和网络软件通讯平台(SuperIO)教程】五.二次开发图形显示界面

    SuperIO相关资料下载:http://pan.baidu.com/s/1pJ7lZWf 1.1    图形显示接口的作用 用于显示采集终端设备的数据,可以把不同类型设备的数据以多种形式集成显示在不 ...

  2. IOS应用内存释放机制

    这是由iOS系统管理决定的,但APP退出在后台后,只有10秒的持续运行时间,然后暂停.但该APP还在内存中,当出现内存警告,也就是别的APP要运行,而此时内存又不足的情况下,系统会回收停在后台APP所 ...

  3. Java基础学习总结 -- 图形用户界面GUI

    虽然目前Java算不上前端开发的主力,但是作为Java入门基础的一部分,学习Java的GUI编程还是有必要的,而且可以做出一些小且有趣的图形程序来提高学习热情.本篇学习总结均为一个Beginner的笔 ...

  4. XML序列化和反序列化

    上篇总结了下JSON的序列化和反序列化,博园中大牛给了很多牛叉的评论,学习了不少. 不过在上篇中忘了把json序列化和反序列化的另外一种方式写上去了,这里做个简单的补充: Json篇:http://w ...

  5. ABAP程序互调用：SUBMIT、CALL TRANSACTION、LEAVE TO TRANSACTION

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  6. android 动画效果

    动画资源 一.分类: (一).概要:         3.0以前,android支持两种动画模式,补间动画(tween animation),帧动画(frame animation),在android ...

  7. Android触摸事件流程剖析

    Android中的触摸事件流程就是指MotionEvent如何传递,主要包括两个阶段: onInterceptTouchEvent触摸事件拦截方法传递,从外到里传递 onTouchEvent触摸事件处 ...

  8. CRLF line terminators导致shell脚本报错：command not found

    Linux和Windows文本文件的行结束标志不同.在Linux中,文本文件用"/n"表示回车换行,而Windows用"/r/n"表示回车换行.有时候在Wind ...

  9. 浅谈iptables防SYN Flood攻击和CC攻击

    ------------------------本文为自己实践所总结,概念性的东西不全,这里粗劣提下而已,网上很多,本文主要说下目前较流行的syn洪水攻击和cc攻击------------------ ...

  10. SQL Server 2008 R2——使用计算列为表创建自定义的自增列

    =================================版权声明================================= 版权声明:原创文章 谢绝转载  请通过右侧公告中的“联系邮 ...