echart初体验 动态加载数据
2024-09-27 12:06:50
<!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>
最新文章
- UIImageView 自带动画+N张图片实现很炫的动画
- [HDU4507]吉哥系列故事——恨7不成妻
- Spring事务解析2-标签解析
- CentOS7下安装MYSQL5.7
- dotnetConf
- Model的绑定
- 运行java -version报cannot restore segment prot after reloc: Permission denied
- Android TabHost TabWidget 去除黑线(底部下划线)
- Codeforces335B - Palindrome(区间DP)
- 大小中型数据库和Oracle的常用命令
- HTML5之兴趣爱好
- Oracle 查询时间在当天的数据
- Catalan数——卡特兰数
- Python面向对象——多重继承
- 图片验证码demo示例
- JAVAEE——Mybatis第一天:入门、jdbc存在的问题、架构介绍、入门程序、Dao的开发方法、接口的动态代理方式、SqlMapConfig.xml文件说明
- Urllib库的使用
- web 应用常见安全漏洞
- Python内置函数(12)——compile
- EXCEL文件导入时报_未在本地计算机上注册Microsoft.ACE.OLEDB.12.0提供程序
热门文章
- 【DFS】POJ3009-Curling 2.0
- Problem I: 零起点学算法88——青年歌手大奖赛_评委会打分
- 如何通俗理解——>;集群、负载均衡、分布式
- 【QQ输入法】QQ输入法-剪切板 释放内存
- android基础知识复习——RelativeLayout布局属性、背景、半透明设置(XML设置)
- 通过HTTP发包工具了解HTTP协议
- java发送http的get和post请求
- 体积雾 global fog unity 及改进
- g++动态库静态库混合链接
- 前端性能优化:使用Array.prototype.join代替字符串连接