在上一篇博客中，学习了使用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",        //返回数据形式为json

        success: 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;

        }

    }

}

最终效果：

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

  1. C#曲线分析平台的制作（六，Sqldependency+Signalr+windows 服务）

    在经过五天的学习和资料收集后,终于初步实现了利用sqldependency进行数据库变化监控,signalr进行前后台交互,数据实时更新.下面将源代码贴出进行初步分析: 1.系统整体框架构成: 2.具 ...

  2. C#曲线分析平台的制作（四，highcharts+ajax加载后台数据）

    在上一篇博客:C#曲线分析平台的制作(三,三层构架+echarts显示)中已经完成了后台的三层构架的简单搭建,为实现后面的拓展应用开发和review 改写提供了方便.而在曲线分析平台中,往往有要求时间 ...

  3. C#曲线分析平台的制作（一，ajax+json前后台数据传递）

    在最近的项目学习中,需要建立一个实时数据的曲线分析平台,这其中的关键在于前后台数据传递过程的学习,经过一天的前辈资料整理,大概有了一定的思路,现总结如下: 1.利用jquery下ajax函数实现: & ...

  4. C#曲线分析平台的制作（三，三层构架+echarts显示）

    本文依据CSDN另一位网友关于三层构架的简单搭建,基于他的源码进行修改.实现了三层构架合理结构,以及从数据库中传递数值在echarts显示的实验目的. 废话不多说,show me codes: 具体构 ...

  5. C#曲线分析平台的制作（五，Sqldependency+Signalr+windows 服务 学习资料总结）

    在前篇博客中,利用interval()函数,进行ajax轮询初步的实现的对数据的实时显示.但是在工业级别实时显示中,这并非是一种最好的解决方案.随着Html5 websocket的发展,这种全双工的通 ...

  6. centos7搭建ELK Cluster集群日志分析平台（二）：Logstash

    续  centos7搭建ELK Cluster集群日志分析平台(一) 已经安装完Elasticsearch 5.4 集群. 安装Logstash步骤 . 安装Java 8 官方说明:需要安装Java ...

  7. ELK搭建实时日志分析平台之二Logstash和Kibana搭建

    本文书接前回<ELK搭建实时日志分析平台之一ElasticSearch> 文:铁乐与猫 四.安装Logstash logstash是一个数据分析软件,主要目的是分析log日志. 1)下载和 ...

  8. TOP100summit：【分享实录-WalmartLabs】利用开源大数据技术构建WMX广告效益分析平台

    本篇文章内容来自2016年TOP100summitWalmartLabs实验室广告平台首席工程师.架构师粟迪夫的案例分享. 编辑:Cynthia 粟迪夫:WalmartLabs实验室广告平台首席工程师 ...

  9. 传统式与自助式BI分析平台有什么区别

    如今自助式BI分析平台已经成为众多企业进行数据分析工作时的首选,究竟自助式BI分析平台在数据分析中有哪些优势,可以受到企业如此的青睐与追捧呢?小编将在本文中,跟大家一起来了解自助式BI分析平台的概念. ...

随机推荐

  1. CVPR2021|一个高效的金字塔切分注意力模块PSA

    ​ 前言: 前面分享了一篇<继SE,CBAM后的一种新的注意力机制Coordinate Attention>,其出发点在于SE只引入了通道注意力,CBAM的空间注意力只考虑了局部区域的信息 ...

  2. 办公利器！用Python快速将任意文件转为PDF

    痛点: 相信大家都会遇到一种场景.老师/上司要求你把某个文件转为pdf,并且是一批(不止一个,一个的话手动就可以搞定),并且这种是枯燥无聊的工作,既没有什么技术含量又累. 试想一下,如果我把这些文件放 ...

  3. .NET Core/.NET5/.NET6 开源项目汇总8：Blazor项目

    系列目录     [已更新最新开发文章,点击查看详细] Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建信息丰富的交互式 U ...

  4. BGP路由技术

    BGP路由技术 目录 一.BGP概述 1.1.自治系统 1.2.动态路由分类 1.3.BGP概念 1.4.BGP的特征 1.5.BGP工作原理 二.命令配置 2.1.BGP配置思路 2.2.命令 一. ...

  5. 信息熵，交叉熵与KL散度

    一.信息熵 若一个离散随机变量 \(X\) 的可能取值为 \(X = \{ x_{1}, x_{2},...,x_{n}\}\),且对应的概率为: \[p(x_{i}) = p(X=x_{i}) \] ...

  6. 个人使用uploadify插件遇到的一些问题

    当uploadify上传插件遇到的好几个问题 现在开始自我反省,留下脚印希望能够帮助其他遇到同样问题的朋友. 我遇到的第一个是, 在firefox不能执行uploadify事件onUploadSucc ...

  7. 『心善渊』Selenium3.0基础 — 21、Selenium实现绕过验证码进行登陆

    目录 1.验证码问题 2.处理验证码的方法 3.Selenium绕过验证码登陆的实现 4.总结 5.补充练习 1.验证码问题 对于Web应用来说,大部分的系统在用户登录时,都要求用户输入验证码.验证码 ...

  8. 暑假自学java第一天

    今天通过网上的学习资料安装了Java的环境和java的程序开发工具包(JDK) 还安装了eclipse ,英语不太好,所以不太会用这个软件,网上搜了教程,还是出现了问题:unnamed package ...

  9. spring boot j集成seagger 加入拦截器后 swagger 不能访问

    一开始我是这样排除拦截的,但是发现没用 后来我发现swagger的真实访问路径是这样的 转自: https://blog.csdn.net/ab1991823/article/details/7906 ...

  10. 3shell命令替换

    Shell 命令替换是指将命令的输出结果赋值给某个变量.比如,将使用ls命令查看到的某个目录中的内容保存到某个变量中,这就需要使用命令替换. Shell 中有两种方式可以完成命令替换,一种是反引号` ...