Echarts柱狀圖，餅狀圖，折線圖案例
/*
* name :tuzuoquan
* mail :[email protected]
* date :2016/11/27
* version :1.0
* description:
* CopyRight (C) 2016-11-21
*/
(function($){
$.studentIndex = {
/*
* 獲得json資料；資料格式檢視jsonData中的json檔案
* url: ajax 地址
* params type obj {} 配置返回資料的多少，day week month
*callback 用於例項化echart 的回撥函式
*id 用於放置echart表的dom元素 id 不用加“#”
* name; 錶盤的名字自定義
* */
getData:function(url,params,id,callback){
//console.log("url = " +url);
$.ajax({
type: "POST",
url: url,
//async: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: params,
success: function(data) {
//console.log(data);
callback(id,data);
}
});
},
/**
* 初始化成圖示
* id :表示要放置柱狀圖的div的id
* json :表示json資料的內容
*/
initBarChart:function(id,json) {
var legendDataArr = json.legendDataArr;
var xAxisDataArr = json.xAxisDataArr;
var seriesDataArr = json.seriesDataArr;
var title = json.title;
// 基於準備好的dom，初始化echarts圖表
var myChart = echarts.init(document.getElementById(id));
var option = {
title:{
show:true,
text:title,
textStyle:{
fontSize:15,
fontWeight:'normal'
}
},
tooltip: {
show: true
},
legend: {
orient : 'horizontal',
x : 'center',
y : 'bottom',
data:[title/*,'月檢測量2'**/]
},
xAxis : [
{
type : 'category',
data : ["12月","1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月"]
}
//,
//{
// type : 'category',
// data : ["12月1","1月1","2月1","3月1","4月1","5月1","6月1","7月1","8月1","9月1","10月1","11月1"]
//}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"月檢測量",
"type":"bar",
"data":[20, 40, 80, 100, 120, 80,95,70,65,55,70,80]
}
]
};
option.legend.data = legendDataArr;
//定義x軸上的每列的標題
option.xAxis[0].data = xAxisDataArr[0].data;
//定義x軸上的每列的值
for(var i = 0; i < legendDataArr.length;i++) {
//新增上圖例
option.series[i].name = legendDataArr[i];
//第二個是柱狀圖
option.series[i].type = "bar";
//為圖示新增資料
option.series[i].data = seriesDataArr[i].data;
}
// 為echarts物件載入資料
myChart.setOption(option);
},
/**
* id :表示圖示要放置的位置
* json :表示用於顯示折線圖時所用到的json資料
*/
initLineChart:function(id,json) {
var myChart = echarts.init(document.getElementById(id));
var legendDataArr = json.legendDataArr;
var xAxisDataArr = json.xAxisDataArr;
var seriesDataArr = json.seriesDataArr;
option = {
title:{
show:true,
text:"天檢測量",
textStyle:{
fontSize:15,
fontWeight:'normal'
}
},
tooltip : {
trigger: 'axis'
},
legend: {
orient : 'horizontal',
x : 'center',
y : 'bottom',
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}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['週一','週二','週三','週四','週五','週六','週日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'天檢測量',
type:'line',
stack: '總量',
data:[120, 132, 101, 134, 90, 230, 210]
}
]
};
option.legend.data = legendDataArr;
//定義x軸上的每列的標題
option.xAxis[0].data = xAxisDataArr[0].data;
//定義x軸上的每列的值
for(var i = 0; i < legendDataArr.length;i++) {
//新增上圖例
option.series[i].name = legendDataArr[i];
//第二個是柱狀圖
option.series[i].type = "line";
//為圖示新增資料
option.series[i].data = seriesDataArr[i].data;
}
// 為echarts物件載入資料
myChart.setOption(option);
},
/**
* id :表示圖示要放置的位置
* json :表示用於顯示柱狀圖時所用到的json資料
*/
initPieChart:function(id,json) {
var myChart = echarts.init(document.getElementById(id));
var legendDataArr = json.legendDataArr;
var seriesDataArr = json.seriesDataArr;
option = {
title:{
show:true,
text:"使用者來源",
textStyle:{
fontSize:15,
fontWeight:'normal'
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'horizontal',
x : 'center',
y : 'bottom',
//data:['華南','華東','西北','西南','華北',"華中"]
data:legendDataArr
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'center',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'使用者來源',
type:'pie',
radius : ['50%', '70%'],
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true,
position : 'center',
textStyle : {
fontSize : '20',
fontWeight : 'bold'
}
}
}
},
data:[
{value:seriesDataArr[0], name:legendDataArr[0]},
{value:seriesDataArr[1], name:legendDataArr[1]},
{value:seriesDataArr[2], name:legendDataArr[2]},
{value:seriesDataArr[3], name:legendDataArr[3]},
{value:seriesDataArr[4], name:legendDataArr[4]},
{value:seriesDataArr[5], name:legendDataArr[5]},
{value:seriesDataArr[6], name:legendDataArr[6]}
]
}
]
};
// option.legend.data = legendDataArr;
// //定義x軸上的每列的值
// for(var i = 0; i < legendDataArr.length;i++) {
// //新增上圖例
// option.series[0].data[i].name = legendDataArr[i];
// //為圖示新增資料
// option.series[0].data[i].value = seriesDataArr[i].data;
// }
// 為echarts物件載入資料
myChart.setOption(option);
}
};
})(jQuery);
$(function() {
$.studentIndex.getData(contextPath +"/admin/index/getMonthData.action", /**設定回撥，對應的是後續專案中的action**/
{"id":"testId","roleId":"roleId"}, /**對應的是後續傳遞給後臺action的params引數*/
'statistics-month', /**表示圖示要放在哪個id的div中*/
$.studentIndex.initBarChart /**回撥，用於生成圖示用*/
);
//$.studentIndex.getData(scriptsPath + "common/index/month.json", /**設定回撥，對應的是後續專案中的action**/
//{"id":"testId","roleId":"roleId"}, /**對應的是後續傳遞給後臺action的params引數*/
//'statistics-month', /**表示圖示要放在哪個id的div中*/
//$.studentIndex.initBarChart /**回撥，用於生成圖示用*/
//);
//$.studentIndex.getData(scriptsPath + "common/index/week.json", /**設定回撥，對應的是後續專案中的action**/
// {"id":"testId","roleId":"roleId"}, /**對應的是後續傳遞給後臺action的params引數*/
//'statistics-week', /**表示圖示要放在哪個id的div中*/
//$.studentIndex.initLineChart /**回撥，用於生成圖示用*/
//);
$.studentIndex.getData(
contextPath + "/admin/index/getDayData.action", /**設定回撥，對應的是後續專案中的action**/
{"id":"testId","roleId":"roleId"}, /**對應的是後續傳遞給後臺action的params引數*/
'statistics-week', /**表示圖示要放在哪個id的div中*/
$.studentIndex.initLineChart /**回撥，用於生成圖示用*/
);
// $.studentIndex.getData(
// scriptsPath + "/student/index/user.json", /**設定回撥，對應的是後續專案中的action**/
// {"id":"testId","roleId":"roleId"}, /**對應的是後續傳遞給後臺action的params引數*/
// 'statistics-user', /**表示圖示要放在哪個id的div中*/
// $.studentIndex.initPieChart /**回撥，用於生成圖示用*/
// );
$.studentIndex.getData(
contextPath + "/admin/index/groupByArea.action", /**設定回撥，對應的是後續專案中的action**/
{"id":"testId","roleId":"roleId"}, /**對應的是後續傳遞給後臺action的params引數*/
'statistics-user', /**表示圖示要放在哪個id的div中*/
$.studentIndex.initPieChart /**回撥，用於生成圖示用*/
);
//$.studentIndex.initPieChart("statistics-user","");
if ((navigator.userAgent.indexOf('MSIE') >= 0)
&& (navigator.userAgent.indexOf('Opera') < 0)){
$("#statistics-month").find("div:first-child").css("margin-left","-155px");
}
});