模板的使用

阅读(5775) 标签: echarts模板,

本节将对模板的具体使用的方法详细介绍。

模板参数说明

安装产品后在【安装根目录】/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>

打开模板后,可通过上述红色部分的内容了解到该图形的的基本信息,包括图形名称和参数介绍,参数介绍中详细说明了左侧参数列表里各个参数的数据类型。润乾报表安装包中所自带的模板都提供了如上所述的参数说明,方便用户根据自己的需要在左侧传入不同参数值。

JS 模板的基本使用

以柱形图为例,模板使用步骤如下:

1选中需要设为统计图的单元格,点击 报表-第三方图形 菜单项,或者右键菜单-第三方图形,在图形编辑窗口中点击打开模板按钮,缺省会直接指向【安装根目录】/chart目录,用户也可自行切换到模板的存放路径。

2选择模板后,需对应参数名在左侧参数列表表达式中添加分类系列系列值。

参数列表中的参数值可以引用报表数据,在表达式中使用C1{}的引用方式获取报表扩展单元格数据为参数赋值,参数类型为数组。在js中需以${参数名}的方式获取参数值,如下:

3设置好统计图的属性,点击【确定】按钮,设计器中选中的单元格就自动的插入了统计图。通过WEB预览查看第三方图形即可。

从模板的基本使用方法中可以看到,报表数据可以通过参数的形式动态传递给echarts模板,为了方便初学者和简单需求的用户能更快看到效果,我们提供了大量的echarts模板,用户只需要给模板参数传递合适的参数值,就能快速看到可视化效果。

这些模板里的参数需要传递什么形式的参数值,可以参考对应模板的参数注释说明,和我们demo应用中的实例。至于更高级的使用,期待做出更完美的效果,还需要有一定js基础的前端开发人员深入学习第三方图形。

注意:

由于第三方图形为其他开发者开发与维护,所以图形内容会不断更新修改。例如百度Echarts,通过以下介绍能够清晰地了解百度Echarts在润乾报表部署的步骤和流程。

1、从https://www.echartsjs.com/zh/download.html 中按照方法三,自由选择所需图表和组件进行打包下载。

2、将下载的echarts.min.js重命名为echarts.js并替换到[安装根目录]/report/web/webapps/demo/raqsoft目录下的echarts文件夹中,重启服务即可。

修改已有 JS 模板

如需对已有模板的图形进行调整,可直接在js脚本中进行修改,修改完成后可将模板另存为,方便以后再次使用时不用重新编辑模板。

以柱形图为例,比如想通过参数控制统计图中工具栏的显示,并且将修改后的模板另存为,操作步骤如下:

 

1选中需要设为统计图的单元格,点击 报表-第三方图形 菜单项,或者右键菜单-第三方图形,在图形编辑窗口中点击打开模板按钮,缺省会直接指向【安装根目录】/chart目录,用户也可自行切换到模板的存放路径。

2选择模板后,需对应参数名在左侧参数列表表达式中添加分类系列系列值。

3添加参数控制柱形图中工具栏的显示,缺省工具条在js中是通过” show: true”的方式控制的,true为显示,false为不显示。如想通过参数动态控制工具条的显示,可以手动在左侧添加参数实现即可。

如下图所示,左侧添加toolboxshow参数,参数名可随便定义,但不可与其他参数重名,右侧使用${参数名}进行引用。

4设置好统计图的属性,点击【确定】按钮,设计器中选中的单元格就自动的插入了统计图。toolboxshow参数值设置为false,不显示统计图中的工具条。WEB预览如下:

5双击统计图单元格,点击另存为模板,输入文件名,将当前统计图的js模板另存为方便下次使用时通过打开模板直接使用。