BIEE 11G引入Echarts3.2.3学习总结

由于BIEE自带的图表不够美观灵活，所以引入Echarts图表库更好的实现数据可视化。
一 部署Echarts
从官网下载Echarts包，解压后是一个echarts.min.js的JS库，推荐下载完整版。

打开BIEE的安装目录

在analyticsRes下创建echarts文件夹，然后把下载的echarts.min.js上传到echarts文件夹下，打开console控制台（http://XXXX:7001/console），更新部署analyticsRes。

点击下一步，然后完成，注意完成后要激活更改。

在浏览器输入（http://XXXX:9704/analyticsRes/echarts/echarts.min.js）如果显示echarts.min.js的内容，表示部署成功。
二 用叙述加载图形
下面用一个例子来介绍其具体的实现过程，下图是举例用表的分析和结果。


新建视图，选择其他视图的叙述，该视图支持用户自己编写HTML代码。

前缀内容：

//前缀

  <!-- 引入 ECharts 文件 -->

<script src="/analyticsRes/echarts/echarts.min.js"></script>  

 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id="main" style="width: 800px;height:800px;"></div>

<script type="text/javascript">



// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

var data=[];

var map=[];

</script>

叙述内容：
‘@2’表示标准中的第二列，’@3’表示标准中的第三列，以此类推。

<script>

data.push('@2'); 

map.push({value:'@3',name:'@2'});

</script>

后缀内容：

<script>

option = {

    title : {

        text: '2016年四季度销售额',

        x:'left'

    },

    tooltip : {

        trigger: 'item',

        formatter: "{a} <br/>{b} : {c} ({d}%)"

    },

    legend: {

        x : 'center',

        y : 'top',

        data: data

    },

    toolbox: {

        show : true,

        feature : {

            mark : {show: true},

            dataView : {show: true, readOnly: false},

            magicType : {

                show: true,

                type: ['pie', 'funnel']

            },

            restore : {show: true},

            saveAsImage : {show: true}

        }

    },

    calculable : true,

    series : [

        {

            name:'销售额',

            type:'pie',

            radius : [30, 120],

            center : ['50%', '25%'],

            roseType : 'area',

            data:map

        }

    ]

};

    myChart.setOption(option);

</script>  

保存后可以获得如下饼图效果：