通过上一篇文章可以知道和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. html 输入框 只能输入数字 只能输入字母数字组合

    JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'' ...

  2. PHP 字符串左边补0，字符串右边补0

    概述:项目中经常会使用到在一串编码左边.右边甚至中间自动填充制定字符如"0" 并且制定填充后的字符串长度. 函数str_pad:该函数返回 input 被从左端.右端或者同时两端被 ...

  3. Python爬虫入门一之综述

    大家好哈,最近博主在学习Python,学习期间也遇到一些问题,获得了一些经验,在此将自己的学习系统地整理下来,如果大家有兴趣学习爬虫的话,可以将这些文章作为参考,也欢迎大家一共分享学习经验. Pyth ...

  4. [ASP.NET MVC] ASP.NET Identity登入技术剖析

    [ASP.NET MVC] ASP.NET Identity登入技术剖析 前言 ASP.NET Identity是微软所贡献的开源项目,用来提供ASP.NET的验证.授权等等机制.本篇文章介绍ASP. ...

  5. ADO.NET数据库参数化

    数据库参数化传递可以增强数据的安全性,但却会降低开发效率,为此创建了如下函数以解决这个问题: public static string PrepareParameter(string sql, out ...

  6. HTTP慢速DOS(slow http denial of service attack)

    0x00用途 DOS攻击测试 0x01原理 传送门: http://blog.csdn.net/meiru8/article/details/38726025 https://www.nigesb.c ...

  7. Android横屏下Fragment界面重叠问题

    前言: 项目是基于平板开发的,设计的界面是要求横屏展示界面.所以我将所有的Activity都强制设置为横屏 android:screenOrientation="landscape" ...

  8. synthesize 与dynamic的区别

    官方文档解释: @synthesize will generate getter and setter methods for your property. @dynamic just tells t ...

  9. java设计模式 策略模式Strategy

    本章讲述java设计模式中,策略模式相关的知识点. 1.策略模式定义 策略模式,又叫算法簇模式,就是定义了不同的算法族,并且之间可以互相替换,此模式让算法的变化独立于使用算法的客户.策略模式属于对象的 ...

  10. CSS3-03 样式 2

    前言 在上一篇的博客中,阐述了 CSS 盒模型中的 Margin.Border.Padding 三个样式.但是总觉得,这些东西好像是 HTML 元素的包装样式,真正的要点是 HTML 元素(即:盒模型 ...