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控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
随机推荐
- SSH框架中POJO层， Dao层，Service层， Action层的功能理解
pojo层就是对应的数据库表的实体类(如User类). dao层,一般可以再分为***dao接口和***daoImpl实现类,如userDao接口和userDaoImpl实现类,接口负责定义数据库cu ...
- outline轮廓线在不同CSS样式下的表现
outline轮廓线在不同CSS样式下的表现 CSS 去除浏览器默认 轮廓外框 在默认情况下,点击 a 标签,input,或者添加click事件的时候,浏览器留下一个轮廓外框(chrome之下为蓝色) ...
- lucene: IO/FileNotFoundException：(Too many open files) 查询异常解决
http://stackoverflow.com/questions/6210348/too-many-open-files-error-on-lucene baidu zone - 为什么Luc ...
- iframe元素获取
应用场景:main.jsp 中有Iframe,其中包含 home.jsp,在main.jsp中的dom元素绑定的方法操作home.jsp中元素.或反之操作.
- HDU 3861 The King’s Problem（强连通+二分图最小路径覆盖）
HDU 3861 The King's Problem 题目链接 题意:给定一个有向图,求最少划分成几个部分满足以下条件 互相可达的点必须分到一个集合 一个对点(u, v)必须至少有u可达v或者v可达 ...
- ansible 简单用法
ansible批量复制文件到服务器 ansible -i /etc/ansible/hosts.test test -m copy -a "src=/tmp/test dest=/usr/b ...
- Atitit. 二进制数据ascii表示法，与base64编码解码api 设计标准化总结java php c#.net
Atitit. 二进制数据ascii表示法,与base64编码解码api 设计标准化总结java php c#.net 1. Base64编码, 1 1.1. 子模式 urlsafe Or url ...
- UML类图详解_组合关系
组合关系和聚合关系有一个最大的不同,组合关系中的整体直接掌握部件的生灭,聚合关系中的整体并不具有生灭部件的权力.一旦组合中的整体不存在时,其组合部件也不能单独存在,必须同时消灭.另外,外界也不能直接与 ...
- iOS 集成微信支付【转载】
目前项目里有微信支付的需求,调研过一段时间后,发现其实并没有想象中的那么困难.如果你只是想实现该功能,一个方法足以,但是若你想深入了解实现原理.就需要花费更多的功夫了.目前我只清楚微信支付需要做签名, ...
- Unity3d中使用自带动画系统制作下雨效果(一)
之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪. 步 ...