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

原创
2016/10/24 17:13
阅读数 1.7K

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做图形的展示,一般的绘图思路是:

    一、获取CDA的结果集;

    二、通过JS将CDA的结果集拼凑成我们想要的数据格式(譬如:JSON字符串或JSON对象);

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

  • 代码实现

    一、获取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;

    二、通过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();
                }
            }
    })();

    三、编写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()
                    }   
                ]
            });        
        }();
  • 绘图效果展示:

            

 

                    

展开阅读全文
打赏
1
2 收藏
分享
加载中
cda地址在哪里看?
2020/06/16 16:32
回复
举报
请问一下,用这种方法能不能生成地图啊?
2017/12/20 09:25
回复
举报
更多评论
打赏
2 评论
2 收藏
1
分享
返回顶部
顶部