<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>echart</title>

    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

    <script src="http://cdn.bootcss.com/echarts/3.5.3/echarts.js"></script>

</head>

<body>

    <div id="echart" style="width:800px;height:800px">

    </div>

    <script>

        //初始化echart全局对象

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

        //创建初始设置对象 包含一些设置参数

        myChart.setOption({

            title: {

                text: '异步数据加载示例'

            },

            tooltip: {},

            legend: {

                data: ['销量']

            },

            xAxis: {

                data: []

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: []

            }]

        });

        //显示数据加载图标

        myChart.showLoading();

        var dataAll = new Object();

        dataAll.categories = new Array();

        dataAll.data = new Array();

        setInterval(function () {

            // 异步加载数据

            $.get('data.json').done(function (data) {

                for (var i = 0; i < data.data.length; i++) {

                    dataAll.categories.push(data.categories[i]);

                    dataAll.data.push(data.data[i]);

                }

                //隐藏加载中的图标

                myChart.hideLoading();

                // 填入数据

                myChart.setOption({

                    xAxis: {

                        data: dataAll.categories

                    },

                    series: [{

                        // 根据名字对应到相应的系列

                        name: '销量',

                        data: dataAll.data

                    }]

                });

            });

        }, 500);

    </script>

</body>

</html>

　　

echart初体验 动态加载数据的更多相关文章

  1. AppCan学习笔记----关闭页面listview动态加载数据

    AppCan页面关闭 AppCan 的页面是由两个HTML组成,如果要完全关闭的话需要在主HTML eg.index.html中关闭,关闭方法:appcan.window.close(-1); 管道 ...

  2. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  3. 微信小程序（五） 利用模板动态加载数据

    利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:

  4. mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)

    mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...

  5. ASP.NET MVC动态加载数据

    ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分:  Source Code 上图中,有一行代码: <tbody ...

  6. js实现滚动条来动态加载数据

    主要angular2+es6 data:Array<any> //展示的数据 allData:Array<any> //全部的数据 size:number = 10 //每次动 ...

  7. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  8. js动态加载数据并合并单元格

    js动态加载数据合并单元格, 代码如下所示,可复制直接运行: <!DOCTYPE HTML> <html lang="en-US"> <head> ...

  9. 爬虫--selenuim和phantonJs处理网页动态加载数据的爬取

    1.谷歌浏览器的使用 下载谷歌浏览器 安装谷歌访问助手 终于用上谷歌浏览器了.....激动 问题:处理页面动态加载数据的爬取 -1.selenium -2.phantomJs 1.selenium 二 ...

随机推荐

  1. 【平衡树】【pb_ds】 bzoj1861 [Zjoi2006]Book 书架

    需要用数组记录编号为i的书的位置,和位置i处的书的编号. Code: #include<cstdio> #include<ext/pb_ds/assoc_container.hpp& ...

  2. 计算标准差 Exercise07_11

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:计算标准差 * */ public class Exercise07_11 ...

  3. Linux下KVM虚拟机基本管理及常用命令（转）

    说明:可能有重复 一.KVM的基本管理 1.查看KVM虚拟机配置文件 #Kvm虚拟机默认配置文件位置 [root@kvm qemu]# pwd /etc/libvirt/qemu [root@kvm ...

  4. CentOS 6.9下双网卡绑定单个IP地址及装网卡绑定到一个网桥（转）

    说明:经过查阅,原来双网卡绑定一个IP的专业名词叫做bond,可以实现负载均衡:如果想要实现两张网卡绑定到一个网桥,基本思路是两张网卡设置同一个网桥是行不通的,但如果先实现bond,然后将bond绑定 ...

  5. 应用 TransactionScope 报：此操作对该状态的事务无效 的错误

    如果在事务过程跨了数据库服务器(即使在同一台服务器上,两个不同的数据库实例也算跨数据库服务器),而使用 TransactionScope 却报:此操作对该状态的事务无效 的错误 是因为没有启用每台服务 ...

  6. bash中的通配符使用

    通配符的使用 bash命令中的字符由:普通字符.通配符.元字符.转义符构成. 通配符 由shell处理的(不是由所涉及到命令语句处理的,其实我们在shell各个命令中也没有发现有这些通配符介绍), 它 ...

  7. Toad 常用快捷键

    F9             执行全部sql                Ctrl_Enter     执行当前sql                Ctrl+T     补全table_name  ...

  8. Mybatis注解方法操作数据库

    Java中使用Mybatis操作数据库主要有两种方法:注解和xml配置,注解相对比较简单和方便,两种方式的效果一致.本文以注解的方式说明用Mybatis访问数据库的方法 一.创建数据表(MySql) ...

  9. python笔记13-多线程实战篇（tomorrow）

    安装 1.tomorrow安装,用pip可以直接安装 pip install tomorrow 单线程 1.以下案例是单线程时候跑的情况,在下载图片的时候很耗时. # coding:utf-8 fro ...

  10. dcmtk dcmmkdir 使用帮助

    例子: dcmmkdir --recurse  --input-directory C:\TEMP DICOM --output-file C:\TEMP\DCMDIR --recurse 递归 -- ...