最近项目需求，要实现柱状图、饼状图和折线图的报表。使用的是百度开发的echarts，大体使用步骤如下：
一、使用方式
1、引入下载的echarts的js文件，在http://echarts.baidu.com/链接可以下载，而且有API和实例的展示。
2、在页面中，通过div来设置一个固定宽和高的区域块，用来展示报表用。如：
<div id="synchronism" style="width:100%;height:400px"></div>
3、echarts初始化报表区域，var myChart=echarts.init($(‘#synchronism‘).get(0),‘shine‘);
myChart.showLoading();（在异步加载数据时使用，出现加载的图标样式），通过ajax异步加载，
在返回数据成功时，可以定义数组，接收返回的数据，var arr1 = []; arr.push();
myChart.hideLoading();(隐藏加载样式)。
定义js方法，方法传参为报表加载需要的数据数组和报表区域，如下：
function columnTask(arr1,arr2,myChart){
option = {
}
myChart.setOption(option);
}
option里常用参数legend（图例）tooltip（悬浮提示框）
4、在设置报表数据的js方法中，还可以使用一种方法进行赋值，option.legend.data = arr;// 设置图例
二、注意事项
1、在echars的option设置时，柱形图可以设置数据为0的时候也展示，barMinHeight:‘20‘,
柱状图需要设置柱状图最大宽度，barMaxWidth:‘30‘,
有一种堆叠柱状图，就是在series里边设置时，stack设置的一样，就会出现堆叠柱状图。
2、在使用echarts时，如果把浏览器页面缩小，应该重新加载报表。
$(function(){
//加载报表
chartsindex(); //自己定义的js方法用来加载报表
//浏览器大小变化，重新进行报表加载
$(window).resize(function(){
chartsindex();
});
})
3、echars使用过程中有一个问题，如柱状图，横坐标如果太长，需要设置展示为换行。代码如下：
axisLabel : {
interval : 0,
formatter : function(params){
var newParamsName = "";
var paramsNameNumber = 0;
if(null != params){
paramsNameNumber = params.length;
}
var provideNumber = 8;
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
}
}