使用過Echarts之後，感覺Echarts算是個比較好用，API詳細的插件，畢竟百度，也遇到幾個問題，有需要注意的地方。
第一個是折線圖和柱狀圖的區別，其中比較重要的除了bar和line之外，還有一點：
柱狀圖：
type : 'category',
data : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月',
'十月', '十一月', '十二月' ]
折線圖：
type : 'category',
boundaryGap : false,
data : ['週一','週二','週三','週四','週五','週六','週日']
關於x軸點線的問題
boundaryGap這個屬性，其實決定了，折線圖和柱狀圖的不同，柱狀圖的特點是在兩個端點之間建圖，而折線圖是在端點處建圖。
其二：
關於Echarts的綁定事件：
// 路徑配置
require.config({
paths : {
echarts :
'http://echarts.baidu.com/build/dist'
}
});
//金額圖表 使用
require([
'echarts',
'echarts/chart/bar'// 使用柱狀圖就加載bar模塊，按需加載
], DrawEChart2);
//顯示設置
var
option2 = {
title : {
text :
'交易金額統計(單位:元)'
,
subtext :
''
},
tooltip : {
trigger :
'axis'
},
toolbox : {
show :
true,
feature : {
saveAsImage : {
show :
true
}
}
},
legend : {
data : [
'發包金額',
'支付金額'
]
},
calculable :
true,
xAxis : [ {
type :
'category',
data : [
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月'
,
'八月'
,
'九月'
,
'十月',
'十一月',
'十二月'
]
} ],
yAxis : [ {
type :
'value'
} ],
series : [ {
name :
'發包金額',
type :
'bar',
data : [ 0 ]
}, {
name :
'支付金額',
type :
'bar',
data : [ 0 ]
} ]
};
function
DrawEChart2(ec, theme) {
// 基於準備好的dom，初始化echarts圖表
var
myChart = ec.init(document.getElementById('main2'
),
'macarons'
);
//回調函數
ajaxPostForm(
"/uc.do?m=ajaxStatisDetails", {
jude : $(
"#jude").val()
},
function(json) {
var
options = myChart.getOption();
if
(json.msg ==
"C") {
options.series[0].data = json.result.totalPrice.split(","
);
//options.series[1].data =json.result.servicePrice.split(",");
options.series[1].data = json.result.compPrice.split(","
);
}
else
{
options.series[0].data = json.result.biddedMoneySum.split(","
);
//options.series[1].data =json.result.payApplyMoneySum.split(",");
options.series[1].data = json.result.audPayMoneySum.split(","
);
}
myChart.hideLoading();
myChart.setOption(options);
});
var
ecConfig = require(
'echarts/config');
function
eConsole(param) {
$(
"#role1").val($(
"#jude").val());
if
($(
"#jude").val() ==
'C') {
}
// alert(option.series[param.seriesIndex].name);
// alert(param.name);
// alert(param.value);
else
{
var
month = 0;
switch
(param.name) {
case
"一月":
month = 0;
break;
case
"二月":
month = 1;
break;
case
"三月":
month = 2;
break;
case
"四月":
month = 3;
break;
case
"五月":
month = 4;
break;
case
"六月":
month = 5;
break;
case
"七月":
month = 6;
break;
case
"八月":
month = 7;
break;
case
"九月":
month = 8;
break;
case
"十月":
month = 9;
break;
case
"十一月":
month = 10;
break;
case
"十二月":
month = 11;
break;
default:
break;
}
var
url =
null;
switch
(option2.series[param.seriesIndex].name) {
case
"發包金額":
url =
"/uc.do?m=uc&d=toSelectedProjectDetailed"
+ $(
"#jude").val();
break;
case
"支付金額":
url =
"/uc.do?m=uc&d=toSelectedProjectAudBalanceDetailed"
+ $(
"#jude").val();
break;
case
"接包金額":
url =
"/uc.do?m=uc&d=toSelectedProjectDetailed"
+ $(
"#jude").val();
break;
case
"接包收入":
url =
"/uc.do?m=uc&d=toSelectedProjectAudBalanceDetailed"
+ $(
"#jude").val();
break;
default:
break;
}
openSelectedProjectDetailed(
'0',
'A', url, month);
}
}
myChart.on(ecConfig.EVENT.CLICK, eConsole);
//顯示設置
// 爲echarts對象加載數據
myChart.setOption(option2);
myChart.hideLoading();
}
function
submitChart(jude, obj) {
$(
"#ul_data_all li").each(function
() {
$(
this).removeClass(
"selected");
});
$(obj).parent().attr(
"class",
"selected");
$(
"#jude").val(jude);
$(
"#role1").val(jude);
if
(jude ==
"A") {
//修改金額統計名稱
option2.series[0].name =
"發包金額";
option2.series[1].name =
"支付金額";
option2.legend.data[0] =
"發包金額";
option2.legend.data[1] =
"支付金額";
}
else
if
(jude ==
"B") {
//修改發包統計名稱
//修改金額統計名稱
option2.series[0].name =
"接包金額";
option2.series[1].name =
"接包收入";
option2.legend.data[0] =
"接包金額";
option2.legend.data[1] =
"接包收入";
}
else
if
(jude ==
"C") {
//修改發包統計名稱
//修改金額統計名稱
//option2.series[0].name="總成交金額";
option2.series[0].name =
"服務成交金額"
;
option2.series[1].name =
"構件成交金額"
;
//option2.legend.data[0]="總成交金額";
option2.legend.data[0] =
"服務成交金額"
;
option2.legend.data[1] =
"構件成交金額"
;
}
// 使用
require([
'echarts',
'echarts/chart/bar'
// 使用柱狀圖就加載bar模塊，按需加載
], DrawEChart2);
}
通過js的function來綁定事件，動態地插入數據和改變名稱。