BIEE echart 2.0,echart3.0
1、在标准中添加字段
注:(@后面跟的数字,是标准中列的第几个,跟结果中的列的顺序没有任何关系,初学者不要弄混了)
2、然后在结果中添加叙述
3、然后在叙述中添加代码
注意:要勾上“包含HTML标记”前面的选项,嵌入代码,就可以使用了。需要引用标准中数据,直接使用@就可以了。
要显示的行,定义为1,好奇的可以看看不定义为1是什么情况。
前缀代码引入echart2.0官网的js
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JSP Page</title> </head> <body> <div id="mainA" style="height:400px ;width:1300px" ></div> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } });
// 定义需要的数据
A1=[ ];
A2=[ ];
A3=[ ];
A4=[ ];
前缀代码引入echart3.0官网的js
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JSP Page</title> </head> <body> <div id="mainA" style="height:400px ;width:1300px" ></div> <script src="http://echarts.baidu.com/dist/echarts.js"></script> <script type="text/javascript">
// 定义需要的数据
A1=[ ];
A2=[ ];
A3=[ ];
A4=[ ];
叙述部分接收模型数据
A1.push('@1');//字符串类型 A2.push(@2);//数字类型 A3.push(@3);
A4.push(@4);
后缀部分
/*******************************************************************/第一部分为请求的模块类型及初始化 ID同一个分析不要重,与前缀的一致
require ( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表
var myChart= ec.init(document.getElementById('main1'));//修改主题样式var myChart = ec.init(document.getElementById('main1'),'macarons');
/**************************************************************************/第二部分 echart提供的实例代码,引入模型数据A1、A2、A3、A4
option = {
title : {
text: '订单结算量和收入',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['收入','结算量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : A1 //引入数据的数据
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'收入',
type:'bar',
data:A2,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'结算量',
type:'bar',
data:A3,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
/********************************************************/
myChart.setOption(option);
}
);
</script>
</body>
</html>
echart2.0和3.0的配置有一些不同需要根据自己的实例选择