Pentaho BIServer Community Edtion 6.1 社区版本 （3） 使用Echarts

1.上传echarts的js文件

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

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

如图： 

创建js 文件夹 然后进行导入

新建看板，引入资源

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

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

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

 

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

<div id='container' style='width:100%;height:600px'>loading...</div> 

 

这里就能看见之前导入的js

切记：

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

设置属性：

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

设置好之后，点击预览

以上是我修改过后 查数据库的结构

需要用sql 展示  需要如下

由于第一节已经细讲这就不详细讲 第一节

定义表

连接数据库配置

修改引入js

那么问题来了  获取路径哪里来  result 如何获取的值

由于之前配置数据连接 配置了table组件 这时候

 

进入点击preview

选择数据库名称，点击Qusery  URL 获取链接

 

执行以上js 修改 预览 实现使用Echarts