echarts 柱狀圖頁面程式碼（備忘）
阿新 • • 發佈：2018-11-11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>發票資料統計</title>
<!-- 引入 echarts.js -->
<script src="aceadmin/components/echarts/dist/echarts.js"></script>
<style type="text/css">
margin-left : 80px;
}
</style>
</head>
<body>
<div class="search_panel">
<form>
<div class="widget-main row">
<div class="search_elm">
<label class="label_search"> 開票時間:</label>
<input id = "sTime" name="sTime" type="text" class="date starttime2" data-date-format="yyyy-mm-dd" placeholder="起始時間">
<span class="input-group-addon ddcont"><i class="fa fa-exchange"></i></span>
<input id = "eTime" name="eTime" type="text" class="date endtime2" data-date-format="yyyy-mm-dd" placeholder="結束時間">
</div>
<div class="search_elm">
<button class="btn btn-small btn-base" id = "btnSubmit" type="button" title="搜尋">搜尋</button>
<button class="btn btn-small" type="reset" title="清空">清空</button>
</div>
</div>
</form>
</div>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 1366px;height:600px;"></div>
<script type="text/javascript">
$(function(){
$(".starttime2").datetimepicker({
language: 'zh-CN',
autoclose: true,
minView: 2,
todayHighlight: true,
keyboardNavigation:true,
clearBtn: true,
todayBtn: 1,
forceParse:true
}).on('changeDate',function(ev){
var starttime=$('.starttime2').val();
$('.endtime2').datetimepicker('setStartDate',starttime)
$('.starttime2').datetimepicker('hide')
});
$(".endtime2").datetimepicker({
language: 'zh-CN',
autoclose: true,
minView: 2,
todayHighlight: true,
keyboardNavigation:true,
clearBtn: true,
todayBtn: 1,
forceParse:true
}).on('changeDate',function(ev){
var starttime=$('.starttime2').val();
var endtime=$('.endtime2').val();
if(starttime!=""){
$('.starttime2').datetimepicker('setEndDate',endtime)
$('.endtime2').datetimepicker('hide')
}else{
$('.endtime2').val('');
layer.msg("請選擇開始時間");
}
})
})
$(document).ready(function() {
initEchart(1);
})
$("#btnSubmit").click(function () {
initEchart(2);
});
//初始化echarts flag : 1 進入圖表，不選擇時間 2 選擇時間
function initEchart(flag){
require.config({
paths : {
echarts : 'aceadmin/components/echarts/dist'
}
});
require([ 'echarts',
'echarts/chart/bar',
'echarts/chart/line'
], function(ec) {
myChart = ec.init(document.getElementById('main'));
decideEchart(flag);
});
}
//判斷當選擇日期時，如果時間為空做出判斷
function decideEchart(flag){
var beginDate = $('#sTime').val();
var endDate = $('#eTime').val();
var al = {
"beginDate" : beginDate,
"endDate" : endDate
}
if(flag == 2){
if(beginDate==null||endDate==null||beginDate==""||endDate==""){
layer.alert("日期不能為空 ！");
return false;
}
}
myChart.showLoading({
text : "正在載入..."
});
doEcharts(al);
}
//非同步獲取後臺的資料
function doEcharts(al){
$.ajax({
type : "post",
async : false, //同步執行
url : "invDataCount.do",
dataType : "json", //返回資料形式為json
data : {"data" : JSON.stringify(al)},
success : function(result) {
if (result) {
//定義圖表options
var option = {
title : {
text :result.title,
subtext : result.subTitle
},
tooltip : {
trigger : 'axis'
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
legend : {
data : result.legend//資料分組
},
xAxis : [ {
type : 'category',
data : result.category,//橫座標
axisLabel:
{rotate: 20 , interval: 0 ,textStyle:{ color: '#333',fontSize:14}},
} ],
yAxis : [ {
type : 'value'
} ],
series : [{//縱座標
name : result.series[0].name,
type : result.series[0].type,
data : result.series[0].data
}]
};
myChart.hideLoading();
myChart.setOption(option);
}
},
error : function(errorMsg) {
layer.alert("請求資料失敗！");
myChart.hideLoading();
}
});
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>發票資料統計</title>
<!-- 引入 echarts.js -->
<script src="aceadmin/components/echarts/dist/echarts.js"></script>
<style type="text/css">
margin-left : 80px;
}
</style>
</head>
<body>
<div class="search_panel">
<form>
<div class="widget-main row">
<div class="search_elm">
<label class="label_search"> 開票時間:</label>
<input id = "sTime" name="sTime" type="text" class="date starttime2" data-date-format="yyyy-mm-dd" placeholder="起始時間">
<span class="input-group-addon ddcont"><i class="fa fa-exchange"></i></span>
<input id = "eTime" name="eTime" type="text" class="date endtime2" data-date-format="yyyy-mm-dd" placeholder="結束時間">
</div>
<div class="search_elm">
<button class="btn btn-small btn-base" id = "btnSubmit" type="button" title="搜尋">搜尋</button>
<button class="btn btn-small" type="reset" title="清空">清空</button>
</div>
</div>
</form>
</div>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 1366px;height:600px;"></div>
<script type="text/javascript">
$(function(){
$(".starttime2").datetimepicker({
language: 'zh-CN',
autoclose: true,
minView: 2,
todayHighlight: true,
keyboardNavigation:true,
clearBtn: true,
todayBtn: 1,
forceParse:true
}).on('changeDate',function(ev){
var starttime=$('.starttime2').val();
$('.endtime2').datetimepicker('setStartDate',starttime)
$('.starttime2').datetimepicker('hide')
});
$(".endtime2").datetimepicker({
language: 'zh-CN',
autoclose: true,
minView: 2,
todayHighlight: true,
keyboardNavigation:true,
clearBtn: true,
todayBtn: 1,
forceParse:true
}).on('changeDate',function(ev){
var starttime=$('.starttime2').val();
var endtime=$('.endtime2').val();
if(starttime!=""){
$('.starttime2').datetimepicker('setEndDate',endtime)
$('.endtime2').datetimepicker('hide')
}else{
$('.endtime2').val('');
layer.msg("請選擇開始時間");
}
})
})
$(document).ready(function() {
initEchart(1);
})
$("#btnSubmit").click(function () {
initEchart(2);
});
//初始化echarts flag : 1 進入圖表，不選擇時間 2 選擇時間
function initEchart(flag){
require.config({
paths : {
echarts : 'aceadmin/components/echarts/dist'
}
});
require([ 'echarts',
'echarts/chart/bar',
'echarts/chart/line'
], function(ec) {
myChart = ec.init(document.getElementById('main'));
decideEchart(flag);
});
}
//判斷當選擇日期時，如果時間為空做出判斷
function decideEchart(flag){
var beginDate = $('#sTime').val();
var endDate = $('#eTime').val();
var al = {
"beginDate" : beginDate,
"endDate" : endDate
}
if(flag == 2){
if(beginDate==null||endDate==null||beginDate==""||endDate==""){
layer.alert("日期不能為空 ！");
return false;
}
}
myChart.showLoading({
text : "正在載入..."
});
doEcharts(al);
}
//非同步獲取後臺的資料
function doEcharts(al){
$.ajax({
type : "post",
async : false, //同步執行
url : "invDataCount.do",
dataType : "json", //返回資料形式為json
data : {"data" : JSON.stringify(al)},
success : function(result) {
if (result) {
//定義圖表options
var option = {
title : {
text :result.title,
subtext : result.subTitle
},
tooltip : {
trigger : 'axis'
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
legend : {
data : result.legend//資料分組
},
xAxis : [ {
type : 'category',
data : result.category,//橫座標
axisLabel:
{rotate: 20 , interval: 0 ,textStyle:{ color: '#333',fontSize:14}},
} ],
yAxis : [ {
type : 'value'
} ],
series : [{//縱座標
name : result.series[0].name,
type : result.series[0].type,
data : result.series[0].data
}]
};
myChart.hideLoading();
myChart.setOption(option);
}
},
error : function(errorMsg) {
layer.alert("請求資料失敗！");
myChart.hideLoading();
}
});
}
</script>
</body>
</html>