使用过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来绑定事件，动态地插入数据和改变名称。
4008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
