通过上一篇文章可以知道和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. 16、ASP.NET MVC入门到精通——MVC过滤器

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 在ASP.NET MVC中有四种过滤器类型

  2. POI导入导出

    一.使用POI导出Execl表格 需要的jar包 package cn.yxj.poi; import java.io.FileOutputStream; import java.util.Date; ...

  3. C/C++内存分配

    一.      预备知识—程序的内存分配: 一个由C/C++编译的程序占用的内存分为以下几个部分:1.栈区(stack)—由编译器自动分配释放,存放函数的参数值,局部变量的值等.其操作方式类似于数据结 ...

  4. 如何使用jQuery 制作全屏幕背景的嵌入视频

    实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...

  5. Javascript实现格式化输出

    前两天看面试题,其中有一道要实现js的格式化输出,具体给出的是: Javascript实现格式化输出,比如输入999999999,输出为999,999,999 我的实现方式是 function for ...

  6. SE16N使用方案总结

    SAP中直接修改表.视图的Tcode有SE16N和SM30. 另外,在EHP5版本及其更高的版本中,激活编辑功能是不被允许的,不过程序中是通过一个判断语句来限制的,可以通过将相关的判断值判断前加断点, ...

  7. sharepoint报HRESULT:0x80131904的错误的原因和解决方法

    在新建文件库的时候出现的.下上传文件和更改权限,都是在报这个HRESULT:0x80131904的错误,基本所有操作都报同一个错误,如下图: 错误原因 这个问题其实就是:sharepoint配置文件( ...

  8. sharepoint 提升权限报错

    现象: sharepoint中提升权限是为了模拟管理员操作,但是对于普通用户对item的更新和删除照成错误 解决办法: 去掉权限升级 说明: 升级权限能不用尽量不用,同时也不好排查权限问题.

  9. 简单的学习心得：网易云课堂Android开发第三章自定义控件

    这一章分三部分: (1)自定义控件:老师先简单讲解了一些细节,如为什么不用px,而要用dp,只因机型的屏幕分辨率不同,用px会导致差异太大.然后演示了制作自定义控件的步骤,先在xml文件中添加对应的自 ...

  10. 关于iOS10

    iOS10相册相机闪退bughttp://www.jianshu.com/p/5085430b029fiOS 10 因苹果健康导致闪退 crashhttp://www.jianshu.com/p/54 ...