echarts系列之动态加载数据
1.echarts学习前言
最近接触到echarts，发现数据可视化真的是魅力无穷啊，各种变幻的曲线交错，以及‘曼妙’的动画效果真是让人如痴如醉！
下面就来一起欣赏她的美...
“ ECharts是中国的，也是世界的。”
—— 浙江大学教授 · 陈为
“ ECharts，发现数据可视化之美！”
——中国传媒大学教授 · 沈浩
大数据时代
重新定义数据图表的时候到了......
2.echarts的demo代码
需求：ajax请求到json格式数据，动态添加到曲线和表格中
jquery：1.8.3版本
bootstrap：2.3.2版本
用代码说话是我们的游戏规则（吼吼）：
echarts/qiyue.html 中 qiyue.html文件:
<html>
<head>
<title>*echarts*</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/echarts.js"></script>
<style type="text/css">
*{
font-family: "微软雅黑";
}
.count-title{
padding-bottom: 15px;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
}
#main{
width: 100%;
height: 500px;
margin: 0 auto;
}
.total-incre{
padding-left: 147px;
margin-top: 5px;
position: absolute; }
.total-incre strong{
color: #e5903a;
}
.chooseTime{
position: absolute;
right: 100px;
top:18px;
}
.table td,.table th{
text-align: center;
}
.agencyNew{
width: 90%;
}
</style> </head>
<body>
<div class="container agencyNew">
<div class="row">
<!-- Split button --> <h1 class="count-title">XX销售情况</h1> <p class="total-incre">
合计：<strong class="total">888</strong> | 新增 ：<strong class="increase">88</strong>
</p>
<!--下拉框-->
<div class="dropdown chooseTime">
<a class="btn btn-default dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" >
最近一个月
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">最近一个月</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">2017年2月</a></li>
<li><a href="#">2017年1月</a></li>
</ul>
</div>
<!--echarts曲线容器-->
<div id="main"> </div>
<!--表格-->
<table class="table table-bordered table-striped table-hover">
<thead>
<!--动态获取表头--> </thead>
<tbody>
<!--动态获取表格-->
</tbody>
</table>
</div>
</div>
</body>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="js/qiyue.js"></script> </html>
echarts/js/qiyue.js 中 qiyue.js文件:
var myChart,option;
$(function(){
require.config({
paths: {
'echarts': 'http://echarts.baidu.com/build/dist'
}
}); require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
myChart = ec.init(document.getElementById('main'));
option = {
title: {
text: 'XX销售情况',
subtext: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: []
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
}, xAxis: [
{
type : 'category',
boundaryGap : false,
data : [ ]
,
axisLabel: {
interval:0,//横轴信息全部显示
rotate: 30,//60度角倾斜显示
formatter:function(val){
// return val.split("").join("\n"); //横轴信息文字竖直显示
return val;
},
textStyle: {
color: '#000',
align: 'center',
fontWeight: 'bold'
} }
}
],
yAxis: [],
series: []
};
// myChart = require('echarts').init(document.getElementById('main'));
myChart.showLoading({
// text : '数据获取中',
effect: 'whirling'
});
getData(); });
}); //请求json
var fields,
itemsMap,
seriesItem,
yAxis_arr = [],
thead = '',
tbody = '',
tbody_tr = '';
function getData(){
$.ajax({
url : 'data0.json',
dataType : 'json',
async : false,
type : 'get',
success : function(json){
// console.log(json.data);
console.log(option);
fields = json.data.fields;
itemsMap = json.data.itemsMap; createEcharts();//动态创建曲线图
createTab();//动态创建表格
myChart.hideLoading();
myChart.setOption(option); }, error : function(XMLHttpRequest, textStatus, errorThrown){ if(textStatus == 'parsererror'){ alert('数据为空或者SQL语句错误！');
} console.log(errorThrown);
}
});
} /*
* 动态创建曲线图
*/
function createEcharts(){ // series
for(var i=1; i<fields.length; i++){
if(i==1){
itemStyle = {
normal: {
areaStyle: {
type: 'default'
}
}
};
}else{
itemStyle = {
normal: {
color: '#70bf41' }
};
}
option.legend.data.push(fields[i]); // legend
seriesItem = {};
seriesItem.name = fields[i];
seriesItem.type = 'line';
seriesItem.smooth = false;
seriesItem.yAxisIndex= i-1;
seriesItem.itemStyle = itemStyle; seriesItem.data = []; for(var key in itemsMap){
seriesItem.data.push(itemsMap[key][i]);
} // 填充默认显示曲线的数据
option.series.push(seriesItem);
// option.series[0].type = 'line';
// option.series[1].type = 'bar';
// yAxis
var yAxis_obj = {};
yAxis_obj.type = 'value';
yAxis_obj.name = fields[i];
yAxis_obj.show = true;
yAxis_arr.push(yAxis_obj); }
option.yAxis = yAxis_arr;
console.log(yAxis_arr); }
/*
* 动态创建表格
*/
function createTab(){
//动态创建表头
for(var i=0; i<fields.length; i++){ thead += '<th>'+fields[i]+'</th>';
$('.table thead').html('<tr>'+thead+'</tr>'); } for(var j in itemsMap){
var tbody_td = '';
option.xAxis[0].data.push(itemsMap[j][0]); // XAxis
for(var k=0; k<itemsMap[j].length; k++){ tbody_td += '<td>'+itemsMap[j][k]+'</td>'; }
// console.log(tbody_td);
tbody_tr += '<tr>'+tbody_td+'</tr>';
}
$('.table tbody').html(tbody_tr); }
echarts/data0.json 中data0.json文件:
{
"data": {
"itemsMap": {
"1": ["2017-03-1", "3", "8"],
"2": ["2017-03-2", "18", "20"],
"3": ["2017-03-3", "43", "54"],
"4": ["2017-03-4", "50", "74"],
"5": ["2017-03-5", "39", "41"],
"6": ["2017-03-6", "20", "52"],
"7": ["2017-03-7", "21", "25"],
"8": ["2017-03-8", "16", "26"],
"9": ["2017-03-9", "10", "11"],
"10": ["2017-03-10", "8", "10"]
},
"fields": ["日期", "预购", "成交"],
"status": 1
}
}
3.运行结果展示
由于鹅的博客还没有直接运行功能，为了浏览方便我就把效果图贴上吧(= =)
tips：所有数据纯属虚构哦。
源代码在github上提供https://github.com/yingliyu/commonDemo.git
echarts系列之动态加载数据的更多相关文章
- echarts官网上的动态加载数据bug被我解决。咳咳/。
又是昨天,为什么昨天发生了这么多事.没办法,谁让我今天没事可做呢. 昨天需求是动态加载数据,画一个实时监控的折线图.大概长这样. 我屁颠屁颠的把代码copy过来,一运行,caocaocao~bug出现 ...
- Echarts使用及动态加载图表数据
Echarts使用及动态加载图表数据 官网:http://echarts.baidu.com/ 1.文档 2.实例 名词: 1.统计维度(说明数据) 维度就是统计致力于建立一个基于多方位统计(时间.地 ...
- 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控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
随机推荐
- IOS下拉放大图片
代码地址如下:http://www.demodashi.com/demo/11623.html 一.实现效果图 现在越来越多的APP中存在下拉放大图片的效果,今天贡献一下我的实现这种方法的原理,和我遇 ...
- 虚拟机下安装CentOS无法上网的解决方式
我使用VMware虚拟机安装Ubuntu和CentOS,都使用NAT模式连接网络,可是Ubutun能够正常上网,而CentOS不能连接到网络. 原来Centos7默认是不启用有线网卡的.须要手动开启. ...
- 网络协议系列之三：IP
前言 这篇博客主要对IP协议中一些基础知识点加以总结,并将书中一些晦涩难懂的部分去除了.IP地址协议是网络层中最重要的协议,IP地址协议能够对因特网上的全部设备进行唯一标识.也正由于有了IP协议,我们 ...
- CentOS 7中mariadb编译安装教程systemctl启动
mariadb做为mysql的替代品 现在centos的新版本yum包已换成mariadb 跟上篇一样只是启动方式改为systemd 安装一些库 yum install gcc gcc-c++ wge ...
- 关于http和rpc的区别（segmentfault上的回答）
问题最近用了谷歌的grpc,所以对rpc和http有一点疑惑,感觉这两个东西功能上是一样的,rpc某个服务监听某一个方法,客户端调用这个方法,返回相应的数据,和http监听某个方法的路由 返回相应的数 ...
- 转:SQL2008 UNPIVOT 列转行示例
CREATE TABLE pvt (VendorID int, Emp1 int, Emp2 int, Emp3 int, Emp4 int, Emp5 int); GO INSERT INTO pv ...
- tomcat各目录下的作用
1.tomcat的主目录下的文件 bin目录主要是用来存放tomcat的命令,主要有两大类,一类是以.sh结尾的(linux命令),另一类是以.bat结尾的(windows命令). 重要: 很多环 ...
- python简单处理xml文件
Python若是想从xml里读点信息,用BeautifulSoup可能会容易一点,但是如果要修改xml,BeatifulSoup就搞不定了,其实直接用lxml就好. from lxml import ...
- 读写文件,用代码在讲html文件转为jsp文件
package my.testguava; import java.io.BufferedWriter; import java.io.File; import java.io.FileInputSt ...
- Yarn源码分析之如何确定作业运行方式Uber or Non-Uber？
在MRAppMaster中,当MapReduce作业初始化时,它会通过作业状态机JobImpl中InitTransition的transition()方法,进行MapReduce作业初始化相关操作,而 ...