echart統計圖表折線圖demo
阿新 • • 發佈:2019-02-13
var deptName = "";
$(document).ready(function(){
//折線圖
testLine();
});
var myChart = echarts.init(document.getElementById('line'));
//折線圖
function testLine(){
$.ajax({
//提交資料的型別 POST GET
type:"POST",
//提交的網址
url:"<%=basePath%>test/echart_getLineData.action",
//提交的資料
data:{deptName : deptName},
//返回資料的格式
datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
//在請求之前呼叫的函式
//beforeSend:function(){$("#msg").html("logining");},
//成功返回之後呼叫的函式
success:function(data){
var result = eval("("+data+")");
myChart.setOption({
title: {
text: '部門人數統計',
subtext: ''
},
tooltip: {
trigger: 'axis'
},
toolbox: {
show: true,
feature: {
dataView : {show: true, readOnly: false},
saveAsImage: {show : true}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: result.xData
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} 人'
}
},
visualMap: {
show: false,
dimension: 0,
pieces: [{
lte: 6,
color: 'green'
}, {
gt: 6,
lte: 8,
color: 'red'
}, {
gt: 8,
lte: 14,
color: 'green'
}, {
gt: 14,
lte: 17,
color: 'red'
}, {
gt: 17,
color: 'green'
}]
},
series: [
{
name:'用電量',
type:'line',
smooth: true,
data: result.yData,
}
]
});
},
//呼叫執行後呼叫的函式
//complete: function(XMLHttpRequest, textStatus){
/// alert(XMLHttpRequest.responseText);
// alert(textStatus);
//HideLoading();
//},
//調用出錯執行的函式
error: function(){
//請求出錯處理
$.message.alert("出錯了");
}
});
}
$(document).ready(function(){
//折線圖
testLine();
});
var myChart = echarts.init(document.getElementById('line'));
//折線圖
function testLine(){
$.ajax({
//提交資料的型別 POST GET
type:"POST",
//提交的網址
url:"<%=basePath%>test/echart_getLineData.action",
//提交的資料
data:{deptName : deptName},
//返回資料的格式
datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
//在請求之前呼叫的函式
//beforeSend:function(){$("#msg").html("logining");},
//成功返回之後呼叫的函式
success:function(data){
var result = eval("("+data+")");
myChart.setOption({
title: {
text: '部門人數統計',
subtext: ''
},
tooltip: {
trigger: 'axis'
},
toolbox: {
show: true,
feature: {
dataView : {show: true, readOnly: false},
saveAsImage: {show : true}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: result.xData
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} 人'
}
},
visualMap: {
show: false,
dimension: 0,
pieces: [{
lte: 6,
color: 'green'
}, {
gt: 6,
lte: 8,
color: 'red'
}, {
gt: 8,
lte: 14,
color: 'green'
}, {
gt: 14,
lte: 17,
color: 'red'
}, {
gt: 17,
color: 'green'
}]
},
series: [
{
name:'用電量',
type:'line',
smooth: true,
data: result.yData,
}
]
});
},
//呼叫執行後呼叫的函式
//complete: function(XMLHttpRequest, textStatus){
/// alert(XMLHttpRequest.responseText);
// alert(textStatus);
//HideLoading();
//},
//調用出錯執行的函式
error: function(){
//請求出錯處理
$.message.alert("出錯了");
}
});
}