本节将对模板的具体使用的方法详细介绍。
安装产品后在【安装根目录】/chart目录有缺省提供的图形模版,熟悉Echarts图形使用的用户可在此基础上直接传递报表数据,使图形能根据动态数据灵活展现。
以标准漏斗图为例,打开模板后,模板内容如下所示:
<!--
Echarts2——标准漏斗图
左侧参数列表数据类型举例说明:
dataname:['展现','点击','访问','咨询','订单']
datavalue:[60,40,20,80,100,60,40,20,80,100],数据顺序依次为[漏斗图展现,漏斗图点击,漏斗图访问,漏斗图咨询,漏斗图订单,金字塔展现,金字塔点击,金字塔访问,金字塔咨询,金字塔订单]
text:字符串
subtext:字符串
-->
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id='${id}' style="width:${width}px;height:${height}px"></div>
<!-- ECharts单文件引入 -->
<script type="text/javascript">
var names = ${dataname};
var values = ${datavalue};
var mydata = [];
var temp=0;
var clen=names.length;
var vsum=[];
var str="";
for( var i = 0; i < 2; i++ ) {
str="";
str+="[";
vsum=values.slice(temp,temp+clen);
temp+=names.length;
for( var j = 1; j < names.length+1; j++ ) {
str += "{value:"+vsum[j-1]+",name:'"+names[j-1]+"'}";
if (j>0 && j<names.length)
{
str+=",";
}
if (j==names.length)
{
str+="]";
}
}
mydata[i]=str;
}
// 使用
require(
[
'echarts',
'echarts/chart/funnel'
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('${id}'));
option = {
… …
… …
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
打开模板后,可通过上述红色部分内容了解到该图形的名称以及通过左侧传递的各个参数的数据类型。润乾报表安装包中所自带的模板都提供了如上所述的参数说明,方便用户根据自己的需要在左侧传入不同参数值。
以柱形图为例,模板使用步骤如下:
1,选中需要设为统计图的单元格,点击 报表-第三方图形 菜单项,或者右键菜单-第三方图形,在图形编辑窗口中点击打开模版按钮,缺省会直接指向【安装根目录】/chart目录,用户也可自行切换到模版的存放路径。
2,选择模板后,需对应参数名在左侧参数列表表达式中添加分类、系列、系列值。
参数列表中的参数值可以引用报表数据,在表达式中使用C1{}的引用方式获取报表扩展单元格数据为参数赋值,参数类型为数组。在js中需以${参数名}的方式获取参数值,如下:
3,设置好统计图的属性,点击【确定】按钮,设计器中选中的单元格就自动的插入了统计图。通过web预览查看第三方图形即可。
从模板的基本使用方法中可以看到,报表数据可以通过参数的形式动态传递给echarts模板,为了方便初学者和简单需求的用户能更快看到效果,我们提供了大量的echarts模板,用户只需要给模板参数传递合适的参数值,就能快速看到可视化效果。
这些模板里的参数需要传递什么形式的参数值,可以参考对应模板的参数注释说明,和我们demo应用中的实例。至于更高级的使用,期待做出更完美的效果,还需要有一定js基础的前端开发人员深入学习第三方图形。
注意:
由于第三方图形为其他开发者开发与维护,所以图形内容会不断更新修改。例如百度Echarts,通过以下介绍能够清晰地了解百度Echarts在润乾报表部署的步骤和流程。
1、从http://echarts.baidu.com/doc/start.html 中下载最新的build文件夹。
2、根据新下载的build对应的Echarts版本,相应的将build文件夹内容替换[安装根目录]/report/web/webapps/demo/raqsoft目录下的echarts2或echarts3文件夹内容,重启服务即可。
如需对已有模板的图形进行调整,可直接在js脚本中进行修改,修改完成后可将模板另存为,方便以后再次使用时不用重新编辑模板。
以柱形图为例,比如想通过参数控制统计图中工具栏的显示,并且将修改后的模板另存为,操作步骤如下:
1,选中需要设为统计图的单元格,点击 报表-第三方图形 菜单项,或者右键菜单-第三方图形,在图形编辑窗口中点击打开模版按钮,缺省会直接指向【安装根目录】/chart目录,用户也可自行切换到模版的存放路径。
2,选择模板后,需对应参数名在左侧参数列表表达式中添加分类、系列、系列值。
3,添加参数控制柱形图中工具栏的显示,缺省工具条在js中是通过” show: true”的方式控制的,true为显示,false为不显示。如想通过参数动态控制工具条的显示,可以手动在左侧添加参数实现即可。
如下图所示,左侧添加toolboxshow参数,参数名可随便定义,但不可与其他参数重名,右侧使用${参数名}进行引用。
4,设置好统计图的属性,点击【确定】按钮,设计器中选中的单元格就自动的插入了统计图。toolboxshow参数值设置为false,不显示统计图中的工具条。web预览如下:
5,双击统计图单元格,点击另存为模板,输入文件名,将当前统计图的js模板另存为方便下次使用时通过打开模板直接使用。