由于BIEE自身的展现方式有限，并且不能人为修改，不能满足一些业务需求（有些纯粹是领导觉得不好看，弄个好看点的），所以很多项目都需要引入其他展现方式来满足展现。但是很多人又不知道怎么用，所以写了这篇文章给大家说说。
可以引用的展现方式有很多种，但是目前来说国内用的比较多的基本上就echarts或者D3，因为这两种是免费的，而且能够满足大部分需求，当然，要是不能满足可以花钱买highcharts等工具。
highcharts：http://www.hcharts.cn/（收费）
echarts：http://echarts.baidu.com/
D3 ：http://d3js.org/
如果大家有什么好的产品，可以留言，大家都研究研究。下面开始步入正题：
需要注意的是，首先需要激活BIEE服务器中的analyticsRes，才能对进行BIEE图形界面展示的修改（这个我想大家都知道怎么做，这里我就不做介绍了）
如何在BIEE中引入JS等展现方式，这里我用三个不同的产品介绍，由简入深。
一、用叙述引入Dreamweaver生成的HTML代码：
1、在标准中添加字段
注：（@后面跟的数字，是标准中列的第几个，跟结果中的列的顺序没有任何关系，初学者不要弄混了）
2、然后在结果中添加叙述
3、然后在叙述中添加代码
注意：要勾上“包含HTML标记”前面的选项,嵌入代码，就可以使用了。需要引用标准中数据，直接使用@就可以了。
要显示的行，定义为1，好奇的可以看看不定义为1是什么情况。
关于编辑工具的话，新手推荐直接使用Dreamweaver，编辑好需要的样式，直接将代码粘贴到叙述中就可以使用了，上面用的就是这个方法
另外说一个关于国内的不对齐表头的情况，理论上用这个方法也可以实现，但是具体的实施我没有做过，有这样的需求的可以考虑用这个方式试试看看
二、叙述引入百度echarts代码
百度弄了个好东西--echarts，这个东西完全开源免费，而且支持在线修改预览，也可以把代码包下载到服务器上，这样就可以在断网的情况下在线修改预览。而且度娘给出了配置手册，这样就可以针对性的修改了，不得不说度娘做了一件好事，前段时间推销的“魔镜”的大数据产品，前台展现完全就是echarts的引用，代码都没修改。
1、模块化单文件引入
http://echarts.baidu.com/doc/doc.html，这个文档中介绍了图表类型，名词解释，说到底就是告诉你，我这里有这么个东西，叫什么名字，怎么用。后面的单文件引入告诉你怎么把echarts引入到界面中使用。这里我给大家简单明了的用法，不用看那个引入文档了。
首先，找到你想用的实例，打开，就会看到下面的实例，然后将左边黑色背景区的代码进行编辑，得到你想要的样子（点击刷新，右边的图形才会根据左侧的修改进行变化），编辑完成后，拷贝代码，放到图下面的“空白君”那里。就可以了。
有的会在最下面放一个随机数值生成的代码，注意用不到的话要去掉。
还有最重要的一个，找到下面代码的require，在function上面，'echarts/chart/map'，看见没，就这个，看到后面的备注没，按需加载，按需加载，按需加载，重要的事情说三遍。“需”是指你要用到的图形，这个自己去上面的文档中找对应吧
<html>
<head>
<meta charset="utf-8"/>
<title>自己起名字</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="mainb" style="height:500px;width:600px"></div>
<!-- ECharts单文件引入 -->
<script src="/analyticsRes/echarts/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: '/analyticsRes/echarts/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/gauge' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('mainb'));
var
-------------------------------------我是华丽的分割线---------------------------------------
请叫我空白君
-------------------------------------我是华丽的分割线---------------------------------------
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
</html>需要注意几个地方：
1. 重要的事情说三遍；
2. 引用的路径正确性；
3. ID不要用main，自己换个名字；
4. option和分割线的var要放在一行。
暂时就这么多注意点，想起来了再增加
2、数组的处理
单文件引入的，只是针对只有一个值的情况，但是实际中有很多数组引用的情况，我这里就贴出来一个例子，你们看看我是怎么引用的，怎么对数组进行处理的，个人认为一看就会，我就不多说什么了，要是有什么不明白的，请留言。
这里的实例用的是地图文件
标准
结果
前缀内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mainb" style="height:500px;width:700px"></div>
<script src="/analyticsRes/echarts/build/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: '/analyticsRes/echarts/build/dist'
}
});
Y1=[];
XXXX=[];
叙述内容：
Y1.push('@1');
XXXX.push('@2');
后缀内容：
var dataobj=[];
for(var i=0;i<Y1.length;i++){
dataobj.push({name:Y1[i],value:XXXX[i]})
}
require(
[
'echarts',
'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('mainb'));
var option = {
title : {
text: '订单量',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
x:'left',
data:['订单量']
},
dataRange: {
x: 'left',
y: 'bottom',
splitList: [
{start: 1500},
{start: 900, end: 1500},
{start: 310, end: 1000},
{start: 200, end: 300},
{start: 10, end: 200, label: '10 到 200（自定义label）'},
{start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black'},
{end: 10}
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
toolbox: {
show: true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
series : [
{
'name': '订单量',
type: 'map',
mapType: 'china',
roam: false,
itemStyle:{
normal:{
label:{
show:true,
textStyle: {
color: "rgb(249, 249, 249)"
}
}
},
emphasis:{label:{show:true}}
},
data:dataobj
}
]
};
myChart.setOption(option);
}
);
</script>
</body>
</html>
