前一篇 | 后一篇

模板的使用

阅读（15644）点赞（113）标签: echarts模板,

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

模板参数说明

安装产品后在[安装根目录]\chart目录有缺省提供的图形模板，熟悉Echarts图形使用的用户可在此基础上直接传递报表数据，使图形能根据动态数据灵活展现。

以标准漏斗图为例，打开模板后，模板内容如下所示：

<!--

Echarts2——标准漏斗图

左侧参数列表数据类型举例说明：

dataname:['展现','点击','访问','咨询','订单']

datavalue:[60,40,20,80,100,60,40,20,80,100]，数据顺序依次为[漏斗图展现,漏斗图点击,漏斗图访问,漏斗图咨询,漏斗图订单,金字塔展现,金字塔点击,金字塔访问,金字塔咨询,金字塔订单]

text:字符串

subtext:字符串

-->

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://echarts.apache.org/zh/download.html中按照方法三，自由选择所需图表和组件进行打包下载。

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

修改已有 JS 模板

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

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

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

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

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

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

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