Pentaho6.1中Echarts3.X可视化图形库的集成

1.软件环境

• 操做系统版本：Win 10 64位
• 可视化图形库版本：Echarts3
• Pentaho BI Server版本号：biserver-ce-6.1.0.1-196

2.库文件引入

• 到百度Echarts官网下载echarts.js文件      http://echarts.baidu.com/
• 上传echarts.js文件到biserver-ce-6.1.0.1-196

                 

                                                                            图、2.1

                  

                                                                               图、2.2

                    

                                                                            图、2.3

                    

                                                                          图、2.4

                   注意项一：在Echarts官网上会存在2个文件，分别是     

             ，

                    实际上，若是你想使用Echarts作图表的展现，只要在Pentaho里引入上述文件中的任意一个，建议引入echarts.min.js。

                  注意项二：咱们在Pentaho里写echarts3的图表代码时，必定要注意咱们所写的js引入的前后顺序，前后顺序入下图所示：

                        

                   注意项三：关于echarts3的插件库的脚本引入的说明

                            相比较于echarts2，echarts3没有像echarts2那样将全部的插件模块所有集成到echarts.js脚本中，而是使用了require.js实现模块化，因此若是咱们想要用echarts的更多的展示效果，就须要引入单独的模块到Pentaho中。简单说明见下图：

                        

3.Echarts3绘图代码规范（以柱状图为例）

        我的建议：因为echarts的绘图js代码采用JSON的编写方式，强烈建议这部分的代码必定要手敲，切勿复制、黏贴；一旦采用复制黏贴的方式写代码极可能会出不了图，这样会很难调试出bug。

• 绘图思路

  咱们在Pentaho里使用Echarts作图形的展现，通常的绘图思路是：

  1、获取CDA的结果集；

  2、经过JS将CDA的结果集拼凑成咱们想要的数据格式（譬如：JSON字符串或JSON对象）；

  3、编写Echarts代码并将数据绑定到Echarts上。

• 代码实现

  1、获取CDA的结果集

  var readJSONFile = function(url){
      var jsonData;
      $.ajax({
      	type : 'GET',
  		url : url,
  		async : false,
  		dataType : 'json',
  		data : null,
  		success : function(response){
  			jsonData = response;
  		}
  	})
  		return jsonData;
  };
  var url_first_bar = "cda地址"
  var getFirstBarJSON = readJSONFile(url_first_bar).resultset;

  2、经过JS将CDA的结果集拼凑成咱们想要的数据格式（譬如：JSON字符串或JSON对象），此处我用的是javascript的面向对象的方式去写这部分代码的。

  /**
      *  实现对CDA数据的封装
      */
      var FirstBarDataEncapsulation = (function(){
          // 柱状图的X轴属性
          var legends = function(){
              var tempArr = [];
              for(var i = 0; i < getFirstBarJSON.length; i++){
                  tempArr.push({
                      'name' : getFirstBarJSON[i][0],
                      selected : true
                  })
                  tempArr[i] = getFirstBarJSON[i][0];
              }
              return tempArr;
          };
          //柱状图的X轴的值
          var data = function(){
              var tempArr = [];
              for(var i = 0; i < getFirstBarJSON.length; i++){
                  tempArr.push({
                      'name' : getFirstBarJSON[i][0], 
                      'value'  : getFirstBarJSON[i][1],
                      selected : true    
                  })
              }
              return tempArr;   
          };
          return {
              getLegends : function(){
                  return legends();
              },
              getDatas : function(){
                  return data();
              }
          }
  })();

  3、编写Echarts代码并将数据绑定到Echarts上，此处我将图形展现的代码封装起来了，方便之后调用。

  var ShowFirstBarEcharts = function(){
          FirstBarEcharts.setOption({
              /*
              title : {
                  //text : '时段营业额',
                  x : 'center',
                  top : 5,
                  textStyle : {
                      color : "#4387C0",
                      fontWeight : 'normal',
                      fontSize : 22
                     fontSize : '20px'
                      font-weight : "normal",
                      font-size : 12px
                      fontSize : "12px",
                  }
                  
              },	
              */
              tooltip : {
                  trigger : 'item'
              },
              /*
              toolbox : {
                  //show : true,
                  feature : {
                      dataView : {
                          //show : true,
                          //readOnly : true
                      },
                  }
              },
              */
              calculable : true,
              grid : {
                  borderWidth : 0,
                  y : 80,
                  y2 : 60
              },
              xAxis : [
                  {
                      name : "时段",
                      //name : "单位/元",
                      nameLocation : "end",
                      type : 'category',
                      show : true,
                      //data : FirstBarLegends
                      axisLine : {
                          show : true
                      },
                      axisLabel : {
                          /*
                          interval : "auto",
                          */
                          //rotate: 25,
                          interval : 0
                          /*
                          textStyle : {
                              color : "#007AC7"
                          }
                          */
                      },
                      splitLine : {
                          show: false
                      },
                      data : FirstBarDataEncapsulation.getLegends()
                  }
              ],
              grid : {    //控制图的大小
                  x : 70,
                  x2 : 70,
                  y2 : 70    //y2能够控制X轴跟Zoom控件之间的间隔，避免觉得倾斜后形成label重叠到Zoom上
              },
              yAxis : [
                  {
                      name : "营业额",
                      nameLocation : "end",
                      type : 'value',
                      show : true,
                      splitLine : {
                          show: true
                      }
                  }
              ],
              series : [
                  {
                      //name : '时段营业额',
                      name : "单位/元",
                      type : 'bar',
                      //barWidth : 20,//柱图宽度
                      barWidth : 40,//柱图宽度
                      itemStyle : {
                          normal : {
                              color : function(params){
                                  var colorList = [
                                      "#007AC7","#007AC7","#007AC7",
                                      "#007AC7","#007AC7","#007AC7",
                                      "#007AC7","#007AC7","#007AC7",
                                      "#007AC7","#007AC7","#007AC7",
                                      "#007AC7","#007AC7","#007AC7"
                                  ];
                                  return  colorList[params.dataIndex]
                              }
                          },
                          label : {
                              show : true,
                              position : 'top',
                              formatter : '{b}\n{c}'
                          }
                      },
                      //data : FirstBarData
                      data : FirstBarDataEncapsulation.getDatas()
                  }   
              ]
          });        
      }();

• 绘图效果展现：