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控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
随机推荐
- LoadRunner+Java接口性能测试
想必各位小伙伴们会对LR还可以调用java感到好奇,之前我也这么一直认为LR只支持C语言.其实LR脚本支持的语言有:C.Java.Visual Basic.VbScript.JavaScript,只不 ...
- android 静态和动态设置 Receiver的 android:enabled值
0x 01 前提约束: 0x001 静态检查:指用action限定Intent,并使用包管理器的queryBroadCastReceivers方法,在flags字段置为0时查找ResolveInfo, ...
- gitlab 6 安装备忘录
gitlab 6.2-stable;Ubuntu 13.10;ruby 2.0.0 推荐使用PostgreSQL,MySQL不同版本可能碰到兼容性问题(www.oschina.net/question ...
- UVA 11014 - Make a Crystal(容斥原理)
UVA 11014 - Make a Crystal 题目链接 题意:给定一个NxNxN的正方体,求出最多能选几个整数点.使得随意两点PQ不会使PQO共线. 思路:利用容斥原理,设f(k)为点(x, ...
- 移动端数据库新王者：realm
介绍 realm是一个跨平台移动数据库引擎,支持iOS.OS X(Objective-C和Swift)以及Android. 2014年7月发布.由YCombinator孵化的创业团队历时几年打造,是第 ...
- discuz添加管理员，找回管理员方法
增加创始人方法: 第一步:打开现在创始人的后台,将你所需要增加的创始人设置为管理员,并且给予后台副站长权限,这两部一定要做到位,先把这两步做完之后再做下面的! 具体设置管理员和给予后台副站长权限请查看 ...
- 做前端（单纯页面和js）遇到的问题辑录（一）
html标签的name和id的值一样,jQuery在选择的时候会混乱么? 1.超链接<a href="http://www.jb51.net" title="脚本之 ...
- Linux HugePage特性
Linux HugePage特性 HugePage,就是指的大页内存管理方式.与传统的4kb的普通页管理方式相比,HugePage为管理大内存(8GB以上)更为高效.本文描述了什么是HugePage, ...
- imx6背光驱动调试
1.内核配置pwm背光驱动make menuconfig:Device Driver ---> Graphics support ---> [*] Backlight & LCD ...
- java 通过Apache poi导出excel代码demo实例
package com.zuidaima.excel.util; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutput ...