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()
                  }   
              ]
          });        
      }();

• 繪圖效果展現：