Echarts小感

来源：互联网发布：域名中.net是什么意思编辑：程序博客网时间：2024/05/25 21:35

使用过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);

//显示设置

varoption2 = {

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 ]

} ]

};

functionDrawEChart2(ec, theme) {

// 基于准备好的dom，初始化echarts图表

varmyChart = ec.init(document.getElementById('main2'), 'macarons' );

//回调函数

ajaxPostForm("/uc.do?m=ajaxStatisDetails", {

jude : $("#jude").val()

},function(json) {

varoptions = 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);

});

varecConfig = require('echarts/config');

functioneConsole(param) {

$("#role1").val($("#jude").val());

if($("#jude").val() =='C') {

}

// alert(option.series[param.seriesIndex].name);

// alert(param.name);

// alert(param.value);

else{

varmonth = 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;

}

varurl =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();

}

functionsubmitChart(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] ="支付金额";

}elseif(jude =="B") {

//修改发包统计名称

//修改金额统计名称

option2.series[0].name ="接包金额";

option2.series[1].name ="接包收入";

option2.legend.data[0] ="接包金额";

option2.legend.data[1] ="接包收入";

}elseif(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来绑定事件，动态地插入数据和改变名称。

0 0