<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>Ajax2</title>

    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script src="../../Scripts/echarts.js" type="text/javascript"></script>

</head>

<body>

  <div id="chartmain" style="width:600px; height: 400px;"></div>

  <div id="t1"></div>

  <div id="t2"></div>

  <div id="t3"></div>

  <script type="text/javascript">

      //初始化echarts实例

      var myChart = echarts.init(document.getElementById('chartmain'));

      //设置图标配置项

      myChart.setOption({

          title: {

              text: 'ECharts 异步加载数据'

          },

          tooltip: {},

          legend: {

              data: ['访问量']

          },

          xAxis: {

              data: []

          },

          yAxis: {},

          series: [

                {

                    name: '访问量',

                    type: 'bar',

                    data: []

                }

            ]

            })

            myChart.showLoading();

            $.ajax({

                url: '/Home/MyData_Test',

                async: true,

                dataType: 'json',

                success: function (data) {

                     /*判断是否取到json对象

                    $("#t1").html(data[0].Name + ',' + data[0].Data);

                    $("#t2").html(data[1].Name + ',' + data[1].Data);

                    $("#t3").html(data[2].Name + ',' + data[2].Data);*/

                    //将json对象转换成对应的数组！

                    //var a = [data[0].Name, data[1].Name, data[2].Name, data[3].Name];

                    //var b = [data[0].Data, data[1].Data, data[2].Data, data[3].Data];

                    //声明数组

                    var a = new Array();

                    var b = new Array();

                    //给数组赋值,将json对象中的属性赋值给数组

                    for (i = 0; i < getJsonObjLength(data); i++) {

                        a.push(data[i].Name);

                        b.push(data[i].Data);

                    };

                    myChart.hideLoading();

                    myChart.setOption({

                        xAxis: {

                            data: a

                        },

                        series: [{

                            name: '访问量',

                            data: b

                        }]

                    })

                }

            })

            //*********获取json对象个数**********//

            function getJsonObjLength(jsonObj) {

                var Length = 0;

                for (var item in jsonObj) {

                    Length++;

                }

                return Length;

            }

  </script>

</body>

</html>

Echarts ajax异步的更多相关文章

  1. H5+JS+JQuery+ECharts实现异步加载

    这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 . 首先,创建一个index.html的文件,我用的vscode打开的,进行编 ...

  2. 基于Flask开发网站 -- 前端Ajax异步上传文件到后台

    大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...

  3. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  4. SSH实战 · AJAX异步校验

    前台JS代码 /*异步验证用户名的输入格式以及是否存在*/ function CheckUsername(){      /*取到用户名输入框*/      var nametxt = documen ...

  5. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  6. spring HandlerInterceptorAdapter拦截ajax异步请求，报错ERR_INCOMPLETE_CHUNKED_ENCODING

    话不多说,直接上正文. 异常信息: Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING 问题描述: 该异常是在页面发送ajax请 ...

  7. jquery Ajax异步请求之session

    写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...

  8. ASP.NET MVC 网站开发总结（五）——Ajax异步提交表单之检查验证码

    首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...

  9. ajax异步请求Response.Redirect重定向

    一个ajax异步请求报错->捕获异常->重定向错误提示页面.  一个简单的流程 结果一直搞不定.重定向无效.各种百度之. 后来突然想起 ajax的请求是不能在后台重定向的. 如果硬要重定向 ...

随机推荐

  1. Mac 10.15 关闭SIP

    升级Mac后SIP开启了,根目录不能创建文件了 关闭 sip,终端输入 sudo mount -uw / 在我们开发过程中,有时候我们安装一些工具软件需要将文件拷贝到系统限制更改的文件夹中,甚至有时需 ...

  2. 手把手教你 iOS通过自己的服务器实现应用分发

    第一步:打包ipa 1:可以是development.ad-hoc.enterprise任何一种打包方式,导出的ipa, 稍后会将安装包上传到服务器上. 2:如下图,箭头指的要打勾 3.点击下一步后出 ...

  3. Nginx优化防爬虫 限制http请求方法 CDN网页加速 架构优化 监牢模式 控制并发量以及客户端请求速率

    Nginx防爬虫优化 Robots协议(也称为爬虫协议,机器人协议等)的全称是“网络爬虫排除标准”(Robots Exclusion Protocol),网站通过Robots协议告诉搜索引擎哪些页面可 ...

  4. kubernetes学习：CKA考试认证

    考点 CKA认证针对考核成为当业界的Kubernetes管理员所需的技能. CKA认证考试包括这些一般领域及其在考试中的权重: 应用程序生命周期管理 -  8% 安装.配置和验证 -  12% 核心概 ...

  5. golang(08)接口介绍

    原文链接 http://www.limerence2017.com/2019/09/12/golang13/#more 接口简介 golang 中接口是常用的数据结构,接口可以实现like的功能.什么 ...

  6. 【转】jstat命令查看jvm的GC情况 （以Linux为例）

    [From]https://www.cnblogs.com/yjd_hycf_space/p/7755633.html jstat命令可以查看堆内存各部分的使用量,以及加载类的数量.命令的格式如下: ...

  7. Tor路径选择说明

    Tor Path Specification Roger Dingledine Nick Mathewson Note: This is an attempt to specify Tor as cu ...

  8. Sqlserver实现故障转移 — AlwaysOn实现故障转移（4）

    目的:在已经加域的计算机上安装sqlserver2012,并配置系统级故障转移及数据库,实现AlwayOn. 域控的建立详见:https://www.cnblogs.com/xiaoerlang90/ ...

  9. Java ——关键字 数据类型 变量 常量

    本节重点思维导图 Java程序结构 public class 类名 { public static void main(String[] args){ //……语句 } } 一门语言是由以下各种元素组 ...

  10. 已经配置好了的 jmeter + ant 框架

    已经配置好了的 jmeter + ant 框架 ,需要自取,避免查找安装攻略时耗费时间 使用前需配置环境变量,阅读文件内安装文档!!! 链接:https://pan.baidu.com/s/1eRz9 ...