echarts报表制作

标签：

　  最近项目需求，要实现柱状图、饼状图和折线图的报表。使用的是百度开发的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;
}
}

echarts报表制作

标签：

原文地址：http://www.cnblogs.com/fzpyqing/p/5728379.html