使用ECharts實現各種資料統計圖(餅圖,柱狀圖,折線圖)在javaWeb中的應用
具體的資源及頁面程式碼可下載 http://download.csdn.net/download/dll322/9912507
準備工作:要下載ECharts的原始檔
第一步:在web端既新建一個jsp頁面
第二步:引入ECharts的js
第三步:為ECharts準備一個具備大小(寬高)的容器
第四部:為模組載入器配置echarts的路徑,從當前頁面連結到echarts.js,定義所需圖表路徑
第五步:動態載入echarts然後在回撥函式中開始使用
option = {
title : {
text: '某地區蒸發量和降水量',
subtext: '純屬虛構'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸發量','降水量']
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸發量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
效果圖如下:
餅圖與柱狀圖類似,ECharts有很多樣式,按需載入就行,柱狀圖是bar,餅圖是pie,這些圖是line
步驟同上:動態載入的資料不一樣
option = {
title : {
text: '某站點使用者訪問來源',
subtext: '純屬虛構',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接訪問','郵件營銷','聯盟廣告','視訊廣告','搜尋引擎']
},
series : [
{
name: '訪問來源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:234, name:'聯盟廣告'},
{value:135, name:'視訊廣告'},
{value:1548, name:'搜尋引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
效果圖如下: