通过上一篇文章可以知道和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. 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

    1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...

  2. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

  3. window对象的属性及事件。

    不同的运行环境有不同的“顶层对象”,而在浏览器的环境中,顶层对象就是window对象.window就是指当前的浏览器窗口. 例:var a = 1: window.a; //1 1.window对象的 ...

  4. navigationController 返回前N个视图

    前提是,由N个视图跳转过来的. //返回前n个 NSInteger index=[[self.navigationController viewControllers]indexOfObject:se ...

  5. ArcSDE安装注意事项（二）

    上次安装的arcsde9.3后尝试往本机sde数据库中导入一个区局的数据库,但是每次都是导到一半就卡死不动,也没有报任何的错误,因此安装了arcsde9.3 sp2补丁,安装补丁后连接sde(非直连方 ...

  6. IOS开发基础知识--碎片10

    1:如何给表格单元列增加选择时的背影效果 if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCel ...

  7. 关于Ruby常用语法案例累积

    变量问题: 类变量和方法变量的区别是什么? 类变量:可以直接使用 方法变量:需要实例化后,才能使用该变量 案例一: class Person @@name = "Tom" @@na ...

  8. Git 技能总结

    创建和使用git ssh key 首先设置git的user name和email: git config --global user.name "xxx" git config - ...

  9. .Net Core 之 图形验证码 本文介绍.Net Core下用第三方ZKWeb.System.Drawing实现验证码功能。

    本文介绍.Net Core下用第三方ZKWeb.System.Drawing实现验证码功能. 通过测试的系统: Windows 8.1 64bit Ubuntu Server 16.04 LTS 64 ...

  10. Java导入的项目乱码怎么解决？(Ⅰ)

    1.项目右键 打开  >>  Properties  >>  Resource  >>  Text file encoding  >>  Other 如 ...