ECharts包含了許多圖表，本文主要對常用的折線圖、柱狀圖、扇形圖三種圖進行封裝，代碼下載：http://pan.baidu.com/s/1kVHlIRX 。
封裝後的ECharts代碼myChart.js：
/*
*
需要的參數：
myChartName:統計圖名稱
myChartId:統計圖id
formatterFun:格式化tooltip
xAxisData:數組，橫座標
legendData: 數組，縱座標代表意義
seriesType: 圖表類型//line,'bar'
barGap:80%
barCategoryGap:80%
seriesData:數組
*/
require.config({
paths: {
echarts: 'echarts'
}
});
function getChart(myChartId,option){
require(
[ 'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/pie',
'echarts/chart/funnel'
],function (ec) {
var myChart = ec.init(document.getElementById(myChartId));
myChart.setOption(option);
}
);
}
function myChart(myChartId,myChartName,formatterFun,legendData,xAxisData,seriesType,barGap,barCategoryGap,seriesData){
var series=[];
for(var i=0,len=legendData.length;i<len;i++){
series[i]={
name:legendData[i],
type:seriesType,
barGap:barGap,
barCategoryGap:barCategoryGap,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
}
},
data:seriesData[i]
}
}
var option={
title : {
text: myChartName
},
tooltip : {
trigger: 'axis',
formatter: formatterFun
},
legend: {data:legendData},//data:['最高氣溫','最低氣溫'
toolbox: {
show : true,
feature : {
mark : {show: false},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
animationDuration :5000,
xAxis : [
{
type : 'category',//category time value log
position: 'bottom',
boundaryGap: true,
axisLine : { // 軸線
show: true,
lineStyle: {
type: 'solid',
width: 1
}
},
axisTick : { // 軸標記
show:true,
length: 10,
lineStyle: {
color: 'red',
type: 'solid',
width: 2
}
},
axisLabel : {
show:true,
interval: 'auto', // {number}
rotate: 30,
margin: 6,
formatter: '{value}',
textStyle: {
fontFamily: 'Arial',
fontStyle: 'italic',
fontWeight : 'normal',
}
},
splitLine : {
show:true,
lineStyle: {
color: '#483d8b',
type: 'dashed',
width: 1,
type: 'solid',
}
},
splitArea : {
show: true,
areaStyle:{
color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
}
},
data : xAxisData
}
],
yAxis : [{type : 'value'}],
series : series
};
getChart(myChartId,option);
}
/*
*
需要的參數：
myChartName:統計圖名稱
myChartId:統計圖id
max：funnel的最大值
formatterFun:格式化tooltip
legendData: 數組，縱座標代表意義
seriesData:數組
*/
function myChartPie(myChartId,max,myChartName,formatterFun,legendData,seriesData){
option = {
title : {
text: myChartName,
x:'center'
},
tooltip : {
trigger: 'item',
formatter: formatterFun
},
legend: {
orient : 'vertical',
x : 'left',
data:legendData
},
toolbox: {
show : true,
feature : {
mark : {show: false},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: max
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:myChartName,
type:'pie',
radius : '55%',
center: ['50%', '50%'],
data:seriesData
}
]
};
getChart(myChartId,option);
}
Html代碼及JS代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="echarts/echarts.js"></script>
<script src="myChart.js"></script>
<script>
var myChartId='chartsId';
var myChartName='統計圖-折線圖';
var formatterFun=function (params,ticket,callback) {
var res = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
if(params[i].value==0){
res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
}else{
res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value*100).toFixed(5)+"%";
}
}
return res;
};
var legendData=['次日留存率','三日留存率','七日留存率','三十日留存率'];
var xAxisData=["2017-03-01","02","03","04","05","06"];
var seriesType='line';
var barGap='80%';
var barCategoryGap='50%';
var seriesData=[];
seriesData[0]=[0.0499494,0.0732613,0.0757541,0.075925,0.0477412,0.0588606];
seriesData[1]=[0.041512,0.0320729,0.0356896,0.0252499,0.0250543,0.0361977];
seriesData[2]=[0.0202497,0.0168805,0.0128943,0.0191127,0.0293944,0.0217186];
seriesData[3]=[0,0,0,0,0,0];
myChart(myChartId,myChartName,formatterFun,legendData,xAxisData,seriesType,barGap,barCategoryGap,seriesData);
</script>
<script>
var myChartId='chartsId1';
var myChartName='統計圖-柱狀圖';
var formatterFun=function (params,ticket,callback) {
var res = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
if(params[i].value==0){
res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
}else{
res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value*100).toFixed(5)+"%";
}
}
return res;
};
var legendData=['次日留存率'];
var xAxisData=["2017-03-01","02","03","04","05","06"];
var seriesType='bar';
var barGap='80%';
var barCategoryGap='50%';
var seriesData=[];
//seriesData[0]=[0.0499494,0.0732613,0.0757541,0.075925,0.0477412,0.0588606];
seriesData[0]=[0.499494,0.732613,0.757541,0.75925,0.477412,0.588606];
myChart(myChartId,myChartName,formatterFun,legendData,xAxisData,seriesType,barGap,barCategoryGap,seriesData);
</script>
<script>
var myChartId='chartsId2';
var max=525;
var myChartName='統計圖-扇形圖';
var formatterFun= "{a} <br/>{b} : {c} ({d}%)";
var legendData=['演唱會','MV','KTV'];
var seriesData=[
{value:435, name:'演唱會'},
{value:525, name:'MV'},
{value:335, name:'KTV'}
];
myChartPie(myChartId,max,myChartName,formatterFun,legendData,seriesData);
</script>
</head>
<body>
<div id="chartsId" class="main" style='width:1000px;height:500px;'></div>
<div id="chartsId1" class="main" style='width:1000px;height:500px;'></div>
<div id="chartsId2" class="main" style='width:600px;height:400px;'></div>
</body>
</html>
折線圖的效果圖如下：
柱狀圖的效果圖如下：
扇形圖的效果圖如下：
