C#曲线分析平台的制作（二，echarts前后台数据显示）

在上一篇博客中，学习了使用javascript和jquery两种方法来进行前后台交互。本篇博客着重利用jquery+echarts来实现从后台取数，从前端echarts中展示。

1.html页面编写：

a.echarts.js导入，jquery框架导入。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  <script src="Scripts/echart/echarts.js"></script><script src="Scripts/jquery-3.3.1.min.js"></script><script src="Scripts/echart/macarons.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>echart demo to ajax+json</title>
</head>

b.echarts+ajax脚本编写：

<body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var mychart = echarts.init(document.getElementById('main'), 'macarons');mychart.setOption({title: {text: '异步加载数据示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: []},yAxis: {},series: [{name: '销量',type: 'bar',data: []}]});mychart.showLoading();var names =[];    //类别数组（实际用来盛放X轴坐标值）var nums = [];    //销量数组（实际用来盛放Y坐标值）$.ajax({type: "post",async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）  url: "index.aspx?method=getdata",//url:"Handler.ashx?method=getdata",data: {},dataType: "json",        //返回数据形式为jsonsuccess: function (result) {//请求成功时执行该函数内容，result即为服务器返回的json对象if (result) {//var json = $.parseJSON(result);alert(result);for (var i = 0; i < result.length; i++) {//alert(result[i].name);names.push(result[i].names);    //挨个取出类别并填入类别数组}for (var i = 0; i < result.length; i++) {nums.push(result[i].nums);    //挨个取出销量并填入销量数组}mychart.hideLoading();    //隐藏加载动画mychart.setOption({        //加载数据图表xAxis: {data: names},series: [{// 根据名字对应到相应的系列name: '销量',data: nums}]});}},error: function (errorMsg) {//请求失败时执行该函数alert("图表请求数据失败!");myChart.hideLoading();}})</script>

2.后台脚本编写（有两种方法：一种使用aspx后台脚本，一种使用一般处理程序ashx）

2.1利用aspx后台脚本：（使用Newtonsoft.dll的jsonconvert方法转换为json字符串）

public partial class index : System.Web.UI.Page
{List<object> lists = new List<object>();string result = "";protected void Page_Load(object sender, EventArgs e){string method = Request.QueryString["method"];if (!string.IsNullOrEmpty(method)){if (method == "getdata"){data();}}}private void data(){lists = new List<object>();var obj = new { names = "yuan", nums = 12 };var obj1 = new { names = "yuan1", nums = 19 };lists.Add(obj);lists.Add(obj1);object JSONObj = (Object)JsonConvert.SerializeObject(lists);Response.Write(JSONObj);//  一定要加，不然前端接收失败Response.End();}

2.2利用ashx：（利用javascriptSerializer进行序列化传输）

public class Handler : IHttpHandler {JavaScriptSerializer jsS = new JavaScriptSerializer();List<object> lists = new List<object>();string result = "";public void ProcessRequest (HttpContext context) {context.Response.ContentType = "text/plain";string method = context.Request["method"];if (!string.IsNullOrEmpty(method)){if (method == "getdata"){lists = new List<object>();var obj = new { names = "yuan", nums =12  };var obj1 = new { names = "yuan1", nums = 19 };lists.Add(obj);lists.Add(obj1);jsS = new JavaScriptSerializer();result = jsS.Serialize(lists);context.Response.Write(result);}}//context.Response.Write("Hello World");}public bool IsReusable {get {return false;}}}

最终效果：

转载于:https://www.cnblogs.com/cache-yuan/p/9218448.html

C#曲线分析平台的制作（二，echarts前后台数据显示）相关推荐

C#曲线分析平台的制作（四，highcharts+ajax加载后台数据）
在上一篇博客:C#曲线分析平台的制作(三,三层构架+echarts显示)中已经完成了后台的三层构架的简单搭建,为实现后面的拓展应用开发和review 改写提供了方便.而在曲线分析平台中,往往有要求时间 ...
一款开源的数据可视化分析平台，提供多种大屏模板，非常炫酷
点击关注公众号,实用技术文章及时了解 DataGear是一款开源的数据可视化分析平台,可自由制作任何您想要的数据可视化看板,支持接入SQL.CSV.Excel.HTTP接口.JSON等多种数据源.系统 ...
手机APP分析平台项目（八）
手机APP分析平台项目(一) 手机APP分析平台项目(二) 手机APP分析平台项目(三) 手机APP分析平台项目(四) 手机APP分析平台项目(五) 手机APP分析平台项目(六) 手机APP分析平台项 ...
手机APP分析平台项目（一）
一.项目背景随着互联网日益发展,手机使用人数越来越多,手机应用也越来越多,每个应用最核心的就是运营了,运营的好坏直接决定了该app的盈利与否,那么就需要一个平台帮助这些app应用运营,这个平台可以知 ...
4.5k star，一款开源的数据可视化分析平台，提供多种大屏模板，非常炫酷
点击关注公众号,实用技术文章及时了解 DataGear是一款开源的数据可视化分析平台,可自由制作任何您想要的数据可视化看板,支持接入SQL.CSV.Excel.HTTP接口.JSON等多种数据源.系统 ...
微信公众平台开发（二）微信公众平台示例代码分析
http://www.cnblogs.com/mchina/archive/2013/06/07/3120592.html 微信公众平台开发(二) 微信公众平台示例代码分析一.摘要微信公众平台提供 ...
html不需要编译就可以直接运行,分析php应用软件性能的诊断系统及其方法和性能管理平台的制作方法...
分析php应用软件性能的诊断系统及其方法和性能管理平台的制作方法 [技术领域] [0001]本发明涉及软件应用性能管理(AMP)技术,尤其涉及一种分析超文本预处理器(Hypertext Preproc ...
企业项目实战---ELK日志分析平台之logstash数据采集（二）
ELK日志分析平台 logstash数据采集 1.logstash简介 2.Logstash安装 3.标准输入到标准输出 4.标准输入到文件 5.标准输入到es主机 6.指定文件输入到es主机 7.s ...
“数据＋算法”双轮驱动，自助分析平台助银行实现“智慧转型”
随着数字化转型的深入发展,不断积累的海量数据和信息成为商业银行的核心资产,银行可以借助大数据分析精准拉客.留存. 商业银行要想在数字化转型方面获得成功,只拥有海量数据是远远不够的,如何深入挖掘和分析才 ...
江门农商银行引入阿里云AnalyticDB，实现数据自助分析平台升级
简介:文章来源:中金在线 3月5日,记者采访获悉,江门农商银行日前完成自助分析平台的升级换代,由阿里云云原生数据仓库AnalyticDB替代传统DB2数据库,满足银行业务报表.管理会计.风控.营销等多 ...

C#曲线分析平台的制作（二，echarts前后台数据显示）

C#曲线分析平台的制作（二，echarts前后台数据显示）相关推荐

最新文章

热门文章