ECharts之餅圖和柱形圖demo
阿新 • • 發佈：2018-01-29
www. 操作 orm 成功 rest dom jquer oos mat
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>渠道分析</title>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery-2.2.4.js"></script>
</head>
<body>
<!-- 為 ECharts 準備一個具備大小（寬高）的 DOM 餅形圖 -->
<div id="main" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById(‘main‘));
myChart.setOption({
title : {
text : ‘充值渠道分析‘,
x : ‘center‘
},
tooltip : {
trigger : ‘item‘,
formatter : "{a} <br />{b} : {c} ({d}%)"
},
legend : {
orient : ‘vertical‘,
x : ‘left‘,
data : []
},
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: ‘left‘,
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [ {
name : ‘‘,
type : ‘pie‘,
radius : ‘55%‘,
center : [ ‘50%‘, ‘60%‘ ],
data : []
} ]
});
myChart.showLoading(); //數據加載完之前先顯示一段簡單的loading動畫
var names = []; //類別數組
var nums = []; //數量數組
var array = [];
$.ajax({
type : "post",
url : "/api/payment/showEChartsData",
data : {},
cache : false, //禁用緩存
dataType : "json",
success : function(result) {
//請求成功時執行該函數內容，result即為服務器返回的json對象
if (result) {
for (var i = 0; i < result.length; i++) {
names.push(result[i].channelName); //挨個取出類別並填入類別數組
}
for (var i = 0; i < result.length; i++) {
nums.push(result[i].num); //挨個取出銷量並填入銷量數組
}
for (var i = 0; i < result.length; i++) {
var map ={};
map.name = result[i].channelName;
map.value = result[i].num;
array[i]=map;
}
myChart.hideLoading(); //隱藏加載動畫
myChart.setOption({ //加載數據圖表
legend : {
data : names
},
series : {
// 根據名字對應到相應的系列
name : [‘數量‘],
data : array
}
});
}
},
error : function(errorMsg) {
//請求失敗時執行該函數
alert("圖表請求數據失敗!");
myChart.hideLoading();
}
});
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>渠道分析</title>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery-2.2.4.js"></script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById(‘main‘));
// 顯示標題，圖例和空的坐標軸
myChart.setOption({
title : {
text : ‘充值渠道分析‘
},
tooltip : {},
legend : {
data : [ ‘數量‘ ]
},
xAxis : {
data : []
},
yAxis : {},
series : [ {
name : ‘數量‘,
type : ‘bar‘,
data : []
} ]
});
myChart.showLoading(); //數據加載完之前先顯示一段簡單的loading動畫
var names = []; //類別數組（實際用來盛放X軸坐標值）
var nums = []; //銷量數組（實際用來盛放Y坐標值）
$.ajax({
type : "post",
async : true, //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行）
url : "/api/payment/showEChartsData", //請求發送到TestServlet處
data : {},
dataType : "json", //返回數據形式為json
success : function(result) {
//請求成功時執行該函數內容，result即為服務器返回的json對象
if (result) {
for (var i = 0; i < result.length; i++) {
names.push(result[i].channelName); //挨個取出類別並填入類別數組
}
for (var i = 0; i < result.length; i++) {
nums.push(result[i].num); //挨個取出銷量並填入銷量數組
}
myChart.hideLoading(); //隱藏加載動畫
myChart.setOption({ //加載數據圖表
xAxis : {
data : names
},
series : [ {
// 根據名字對應到相應的系列
name : ‘數量‘,
data : nums
} ]
});
}
},
error : function(errorMsg) {
//請求失敗時執行該函數
alert("圖表請求數據失敗!");
myChart.hideLoading();
}
})
</script>
</body>
</html>
ECharts之餅圖和柱形圖demo