通过上一篇文章可以知道和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. .net开发过程中Bin目录下面几种文件格式的解释

    在.NET开发中,我们经常会在bin目录下面看到这些类型的文件: .pdb..xsd..vshost.exe..exe..exe.config..vshost.exe.config 项目发布的时候,往 ...

  2. java静态方法调用&&构造函数&&静态块

    静态方法,也就是使用static声明的方法,在虚拟机启动加载类的时候就进行了创建,所以使用到静态方法时,直接使用类名点静态方法即可调用.java在执行静态方法前,不会调用构造函数:构造函数是在实例化j ...

  3. JavaWeb之CSS详解

    CSS的简介 1.CSS概述及作用 CSS:Cascading Style Sheets)是层叠样式表用来定义网页的显示效果.可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强 ...

  4. 闲话js作用域

    js词法环境包括环境变量绑定及外部引用'函数创建的时候有个内部属性[[scope]],它指向当前函数的词法环境对象.而词法环境的外部引用一个词法环境'直到全局词法环境'它外部引用为null'这样就构成 ...

  5. Linux系统实战项目——sudo日志审计

    Linux系统实战项目——sudo日志审计   由于企业内部权限管理启用了sudo权限管理,但是还是有一定的风险因素,毕竟运维.开发等各个人员技术水平.操作习惯都不相同,也会因一时失误造成误操作,从而 ...

  6. Docker 从零开始制作基础镜像[centos]

    http://www.oschina.net/news/62897/docker-hub-contains-high-risk-vulnerabilities 这里有个统计,docker官方和个人发布 ...

  7. How to Operate SharePoint User Alerts with PowerShell

    When you migrate list or site, the user alerts in the site will not be migrated together with the co ...

  8. cordova for ios: Unable to simultaneously satisfy constraints.

    使用cordova开发ios项目的时候,在上传图片碰到一个问题.使用html的<input type="file"/>标签来选择照片或者拍照片,引起了布局报错,然后图片 ...

  9. Linux常用命令：sed

    本文记录的是自己在学习<Linux私房菜>中正则表达式的笔记. 关于行尾符$ 如果文件本身没有内容,比如使用touch新建的文件,那么$将会没有意义.例如下面操作: 先使用touch新建了 ...

  10. 数据结构->直接插入排序

    数据结构->直接插入排序 实现效果 从小到大排序 算法原理 有一个已经有序的数据序列,要求在这个已经排好的数据序列中插入一个数,但要求插入后此数据序列仍然有序. 算法步骤 从第一个元素开始,该元 ...