echarts系列之动态加载数据
2024-08-25 14:06:52
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
最新文章
- Java 项目JDBC 链接数据库中会出现的错误
- MMORPG大型游戏设计与开发（构架）
- SQLServer 表结构相关查询（快速了解数据库）
- LeetCode.4 两个有序数组的中位数问题
- STM32之延时秒,毫秒,微秒
- jquery树形菜单完整代码
- linux标准输入输出重定向
- RTC 之 ARM7 2136 ARM9之2410
- JS实现下拉框选中不同的项，对应显示不同的信息
- 适配iPad的操作表sheet
- C++学习之路—继承与派生（一）:基本概念与基类成员的访问属性
- QCMediaPlayer mediaplayer NOT present（android）
- 关于tarjan算法的空间优化
- 记录一下各个用过 IDE 以及 其他工具 的实用快捷键（持续更新）
- vim编辑器显示行号
- Java+Selenium操作日期时间选择框插件
- python测试开发django-57.xadmin选项二级联动
- 01LaTeX学习系列之---TeX的介绍与认识
- PC上图标显示异常 白色框框处理方案
- （广度搜索）A - Prime Path（11.1.1）