通过上一篇文章可以知道和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. echarts html ajax,ECharts+Ajax动态加载数据实例（.NET）

    什么是ECharts ECharts 是一个数据可视化工具,提供了系列常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折 ...

  2. ECharts动态加载数据绘制折线图

    Echarts动态加载数据绘制折线图 ECharts 引入ECharts 步骤 连接数据接口,动态加载图表 动态加载数据,整体代码 折线图绘制 总结 绘制多个图表的方法 ECharts 纯Javasc ...

  3. 微信小程序使用Echarts图表组件，动态加载数据，图表模糊处理

    1:下载 GitHub 上的项目 https://github.com/ecomfe/echarts-for-weixin 2:项目下载之后,打开小程序开发工具,可以看到效果如下 3:如果是在项目里面 ...

  4. python爬虫实例解析-Python(爬虫)- 动态加载案例分析

    requests """ 基于网络请求的模块. 环境的安装:pip install requests 作用:模拟浏览器发起请求 分析requests的编码流程: 1.指定 ...

  5. jquery table ajax,JQuery Ajax动态加载Table数据的实例讲解

    我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. table第一次加载数据的function定义如下: function loadData() ...

  6. echarts java动态数据_[ASP.net教程]ECharts Java 动态加载数据，echartsjava

    [ASP.net教程]ECharts Java 动态加载数据,echartsjava 0 2015-12-18 00:00:05 1.前台jsp页面html PUBLIC "-//W3C// ...

  7. java中echat如何动态_ECharts Java 动态加载数据，echartsjava

    1.前台jsp页面 pageEncoding="UTF-8"%> html PUBLIC "-//W3C//DTD HTML 4.01 Transitional// ...

  8. java中echat如何动态_ECharts Java 动态加载数据

    1.前台JSP页面ECharts// 配置路径require.config({paths: {echarts: ${ctx}/plugins/echarts- 1.前台JSP页面 pageEncodi ...

  9. echarts动态加载数据生成饼状图

    本文简单介绍使用ajax从JSON文件加载数据,动态生产并状态,第一次写,供大家参考.欢迎大家提出优化意见和建议. 一下是前端的代码: <!DOCTYPE html> <html l ...

最新文章

  1. H5进阶篇--实现微信摇一摇功能
  2. Install oracle10g using responseFile in silent mode
  3. 经典C语言程序100例之二七
  4. Simple TCP Server Client Socket C
  5. linux io函数,unix/Linux低级IO函数的用法有哪些？ 爱问知识人
  6. c/c++教程 - 2.4.1 类和对象，封装，class和struct的区别，成员属性设为私有，类拆分成.h.c文件编写方法
  7. 数据结构与算法python—10.二叉树题目leetcode总结
  8. WampServer 给电脑搭建apache服务器和php环境
  9. android 优秀框架整理
  10. Facebook 全面禁止口罩广告，各平台如何打击哄抬、售假
  11. [02]Hello World!
  12. RT-Thread实战笔记|MPU6050使用详解及DMP姿态解算
  13. 关于自学HTML+CSS+JS的日子
  14. 面向对象程序设计第三次实验课——Wuxing
  15. Lucene深入浅出
  16. pytorch拟合sin函数
  17. 【毕业设计】基于RFID的门禁系统 - 单片机 物联网 嵌入式 stm32
  18. 适配Android Q拍照和读取相册图片
  19. 狂神说网站免费获取500K币
  20. element UI table表格自动生成序号

热门文章

  1. OpenGL 位图字体渲染的实例
  2. OpenGL实现高度图
  3. C语言快速排序 quick sort 算法(附完整源码)
  4. C语言和C++中的struct 和typedef struct
  5. C语言数据类型本质分析
  6. guibuilder 皮肤_和平精英返场皮肤投票排名介绍-返场皮肤哪个好
  7. 安徽大学计算机考研失败,回馈：2014年安徽大学计算机初试回忆题，我是雷锋，低调...
  8. mysql myisam 主从_MySQL的主从复制Replication之MyIsam和InnoDB数据复制发布
  9. android webview loadurl本地,Android WebView 使用loadUrl方法执行本地JavaScript
  10. Faster RCNN总结