echart动态加载数据
<!DOCTYPE html>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>ECharts</
title
>
</
head
>
<
body
>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<
div
id
=
"main"
style
=
"height:400px"
></
div
>
<!-- ECharts单文件引入 -->
<
script
src
=
"js/dist/echarts.js"
></
script
>
<
script
src
=
"Scripts/jquery-2.1.4.min.js"
></
script
>
<
script
type
=
"text/javascript"
>
var uri = 'api/echart_test'
// 路径配置
require.config({
paths:{
echarts: 'js/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map' // 使用柱状图就加载bar模块,按需加载
],
drewEcharts
);
function drewEcharts(ec) {
// 基于准备好的dom,初始化echarts图表
myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : (function(){
var arr=[];
$.ajax({
type : "get",
async : false, //同步执行
url : uri,
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for(var i=0;i<
result.length
;i++){
console.log(result[i].name);
arr.push(result[i].name);
}
}
},
error : function(errorMsg) {
alert("error");
myChart.hideLoading();
}
})
return arr;
})()
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type": uri,
"data":(function(){
var arr=[];
$.ajax({
type : "get",
async : false, //同步执行
url : uri,
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for(var
i
=
0
;i<result.length;i++){
console.log(result[i].num);
arr.push(result[i].num);
}
}
},
error : function(errorMsg) {
alert("error!");
myChart.hideLoading();
}
})
return arr;
})()
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
</script>
echart动态加载数据的更多相关文章
- AppCan学习笔记----关闭页面listview动态加载数据
AppCan页面关闭 AppCan 的页面是由两个HTML组成,如果要完全关闭的话需要在主HTML eg.index.html中关闭,关闭方法:appcan.window.close(-1); 管道 ...
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- 微信小程序(五) 利用模板动态加载数据
利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:
- mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)
mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...
- ASP.NET MVC动态加载数据
ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分: Source Code 上图中,有一行代码: <tbody ...
- js实现滚动条来动态加载数据
主要angular2+es6 data:Array<any> //展示的数据 allData:Array<any> //全部的数据 size:number = 10 //每次动 ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- js动态加载数据并合并单元格
js动态加载数据合并单元格, 代码如下所示,可复制直接运行: <!DOCTYPE HTML> <html lang="en-US"> <head> ...
- 爬虫--selenuim和phantonJs处理网页动态加载数据的爬取
1.谷歌浏览器的使用 下载谷歌浏览器 安装谷歌访问助手 终于用上谷歌浏览器了.....激动 问题:处理页面动态加载数据的爬取 -1.selenium -2.phantomJs 1.selenium 二 ...
随机推荐
- MYSQL将时间格式化
SELECT *,DATE_FORMAT(FROM_UNIXTIME(createtime), "%Y/%m/%d %H:%i:%s") AS dateFormat FROM `I ...
- 高效5步走,高速搭建Hadoop2伪分布环境
前两天将Hadoop2的全然分布式搭建文档整理公布于网上(http://blog.csdn.net/aaronhadoop/article/details/24859369).朋友相邀.就再将Hado ...
- 1.5.4 HAVING子句
1.5.4 HAVING子句正在更新内容.请稍后
- 关于OutOfMemoryError的处理
转自:http://www.blogjava.net/rosen/archive/2010/05/21/321575.html http://www.blogjava.net/rosen/archiv ...
- centos7 rpm 安装MySQL5.6
系统centos7,安装MySQL,出错,百度了一大堆,几乎都是通过yum安装的MySQL,我想说的是,通过yum自动安装的话系统自己会帮你做很多事情,相关联的包也会下下来,相当于替你省去了很多事情, ...
- xcode6-添加真机设备
xcode6-添加真机设备 第一:添加真机设备 1:到苹果开发者中心,中得iOS-APPs,在列表中得Devices中,选择All-点击右侧的"+",添加真机设备. 会打开下面的页 ...
- “千千静听”滚动标题栏,非常简单!(时间器控制窗口标题栏文字,然后赋值给Application.Title)
记得曾写过类似功能,但由于对Delphi数据类型不清楚,要花不少代码去处理中文被切半而出现乱码的尴尬.后来知道只需把字符串定义成 WideString 即可解决半个中文的问题了. 实现过程:不停地剪切 ...
- appche配置访问限制
1. 禁止访问某些文件/目录增加Files选项来控制,比如要不允许访问 .inc 扩展名的文件,保护php类库:<Files ~ "\.inc$"> Order a ...
- java元组-泛型
需要组合对象的时候使用元组可以简化代码,不需要每当需要组合类的时候都去创建一个新的对象.单元素就是常见的泛型,可以两个三个到多个元素:元组可以继承:java泛型不能使用基本类型如int long 必须 ...
- Lucene 4.X 倒排索引原理与实现: (3) Term Dictionary和Index文件 (FST详细解析)——直接看例子就明白了!!!
转自: http://www.cnblogs.com/forfuture1978/p/3945755.html 好好看看吧 倒排列表信息中词典相关存储的最关键格式 占倒排列表中文件大小的多数 我们来看 ...