Pentaho - 使用Echarts

时间 2018/3/30 17:19:27 加载中...

上传echarts的js文件


echarts 使用时,需要引入“echarts.min.js”文件,而如果有 echarts 地图的话,还要引入“china.js”文件。


在 Browse Files 中,先新建一个 js 文件夹,然后,通过 upload 来上传 “echarts.min.js” 和“china.js”文件到 Server 中。


uploadfile.jpg


新建看板,引入资源


新建一个看板,并保存,之后点击“setting”来设置此看板引入 js 的方式,去掉 使用 requireJS support 的勾选(重要)

如果勾选的话,引入的js文件将是通过 requireJS 来加载的,当引入 china.js 时,会有问题,因此这里不使用此方式引入js

而是 使用 <script></script>标签的形式来引入。


setting.jpg


并通过“添加资源”按钮,资源类型选择“Javascript”,来源选择“External File”,点击“OK”


add resource.jpg


添加一个元素后,设置属性

Name:echarts

Resource file:点击 ① 处的按钮,选择之前上传到 public/js 文件夹下的 echarts.min.js 文件

然后点击 ② 处的按钮,复制一份这样的元素

设置属性,并引入 public/js 文件夹下的 china.js 文件


add file.jpg


这样资源的引入就完成了。


添加HTML,并展示一个条形图


在Echarts官网,先找一个简单的Demo,在这里展示一下。


我们先在看板上“添加一行”,再“添加一列”,再“添加html”,

并设置html元素的HTML属性为:<div id='container' style='width:100%;height:600px'>loading...</div> 

这个container来放echarts图表

注意:html要正确,错误的话,也不显示图表


addrow.jpg


我们再点击“添加资源”按钮,新建一个 JavaScript 文件,类型为 Code Snippet(内置脚本)

需要将其位置放在 最下面,因为js脚本是从上到下执行的。


myjs.jpg


设置属性:

name:myjs

resource code为:


function chartSet(ele,option){  
    var dom = document.getElementById(ele);
    var myChart = echarts.init(dom);
    var app = {};    
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}

function getBarOption(){
    return {
            title: {
            left: 'center',
            text: '',
             textStyle:{
                    color:'#fff'
                }
        },
        tooltip: {
            trigger: 'axis',
               
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLabel:{
                rotate:45,
                color:'#fff',
                fontSize :8
            },
            splitLine : {
                show:false
            }
        },
        yAxis: {
            type: 'value',
             axisLabel:{
                rotate:45,
                color:'#fff',
                fontSize :8
            },
            splitLine : {
                show:false
            }

        },
        series: [{
            center: ['55%', '40%'],
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            show:true,
            label:{
                rotate:90
            }
        }]
    };

}

function initChart1(){    
    var option = getBarOption();
    option.title.text='订单量  top 10';    
    chartSet('container',option);
}

function init(){    
    initChart1();    
}

$(function(){
    init();
});


设置好之后,点击预览


result.jpg


结果就出来了。


echarts数据从数据源获取


Pentaho - CDA 中,我们说到 CDA Query Url,这就是一个 api 接口一样的东西。

我们将这里面的数据展示出来,我们需要修改的只是 myjs 中的 initChart1 方法,为option重新赋值


function getCDAData(url){
    var result;
    $.ajax({
        type:'get',
        url:url,
        async:false,
        success:function(data){
            result = data;
        }
    });
    return result;
}

function initChart1(){    
    
    var result = getCDAData('/pentaho/plugin/cda/api/doQuery?path=/public/demo/pentahodemo.cda&dataAccessId=query1');    
    
    //var option = getLineOption();
    var option = getBarOption();
    
    var xdata = [];
    var ydata = [];
    for(var i=0; i<result.resultset.length; i++){
        xdata.push(result.resultset[i][0]);
        ydata.push(result.resultset[i][1]);
    }
     option.title.text='订单量  top 10'
    option.xAxis.data = xdata;
    option.series[0].data = ydata;
    
    chartSet('container',option);
}


需要注意的是,这个 Query Url 的地址,是从 /pentaho 开始的,没有写具体的服务器地址,保证迁移后,正常可用。




扫码分享
版权说明
作者:SQBER
文章来源:http://blog.sqber.com/articles/bi-pentaho-echarts.html
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。