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>  

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