1.    润乾报表中使用Echarts统计图的步骤

2.    报表中添加echarts2统计图

选中需要设为统计图的单元格,点击 报表-第三方图形 菜单项,或者右键菜单-第三方图形,在图形编辑窗口中点击打开模版按钮,缺省会直接指向【安装根目录】/chart 目录,用户也可自行切换到模版的存放路径。 如果需要画的图形在已有模版中不存在, 则可以直接在编辑窗口的右侧 js 区域添加内容即可。

选择好echarts2模板打开后,程序会自动将echarts2模板中的的表达式${a}找出来列到左边的参数列表中,也可以手动增删参数。

左侧参数值可为任意类型的参数,通过 C1{}的引用方式获取报表数据为参数赋值,参数类型为数组。该引用方式通常可用于对分类、系列、系列值的取值。

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

3.    使用echarts2模板在报表中添加柱形图

  1. 新建报表,连接数据源,设置数据集,数据集名称为ds2,数据如下图所示:

  2. A1单元格表达式为=ds2.select(地区),C1单元格的表达式为=ds2.销售额,设置第一行隐藏,在A6的合并单元格中增加echarts统计图,右键A6单元格,在弹出的快捷菜单中选择第三方统计图,打开设计器下自带的echarts2柱形图的模板,在该第三方统计图的对话框左侧的参数列表中设置分类,系列的,数据的对应表达式,统计图的设置如下图所示:

    报表的具体设计如下图:

    以上操作就在报表中添加了柱形的Echarts图,由于echarts统计图是在页面上完成渲染的,所以我们想要看到统计图的效果需要在Web端访问,下面是在web端的显示效果:

    美化echarts统计图

上面我们通过自带的echart2柱形模板做的统计图看着并不美观,我们可以通过修改echarts模板的图表选项option配置将统计图美化成下图的效果:

图表选项,包含图表实例任何可配置选项: 公共选项 , 组件选项 , 数据选项。

Echarts统计图的组件有十个:Axis(坐标轴)、   xAxis横轴(默认类目型)、 yAxis 纵轴(数值型)、Grid(网格)、Polar(极坐标)、Title(标题)、legend(图例)、

DataZoom(数据区域缩放)、DataRange(值域漫游)、Toolbox(工具箱)、Timeline

(时间轴)。

上图中的效果主要操作的组件是:

Legend,grid,xAxis,yAxis,series。

明确了设置的组件,我们可以通过echarts的配置项查找工具了解其具体的属性配置,例如需将图例不显示,那么我们找到legend中show的选项查看到该选项可设置的属性值,具体设置为:

legend: {

show:false,

},

如果想调整柱子的宽度那么操作的是series这个组件的barWidth选项,如:

Series:{

"type":"bar",

“barWidth”:35,

}

概括说明下其设置规则为:

组件名称:{

选项名称:选项值,

},

注:多个选项用英文的逗号分隔,多个组件之间也需用英文的逗号分隔。

下面是对于原有Echarts模板修改后的完整JS模板:

<!-- 为ECharts准备一个具备大小(宽高)的Dom -->

<divid='id_15766045428286741'style="width:${width}px;height:${height}px"></div>

<!-- ECharts单文件引入 -->

<!--<scriptsrc="http://echarts.baidu.com/build/dist/echarts.js"></script>-->

<scripttype="text/javascript">

require(

[

'echarts',

'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载

],

function (ec) {

// 基于准备好的dom,初始化echarts图表

varmyChart = ec.init(document.getElementById('id_15766045428286741'));

varoption = {

backgroundColor:"#000000", //全图背景色

tooltip: {

show: false

},

legend: {

data:${series},

show:false       //图例隐藏

},

grid: {width:'80%',height: '50%',left: '50%', borderColor:"#000000", x: 40,  x2: 6, y: 30, y2: 2},

xAxis : [

{

type : 'category',//坐标轴类型

data :${categories},

axisLabel: {textStyle: {color:"#C2C2C2"}},                            axisTick: {

alignWithLabel: true,

lineStyle: {

width: 18,

color: "#FFFFFF"

},

show: false,

},

axisLine: {

show: false,

lineStyle: {

color: "#000000"

}

},

splitLine: {

lineStyle: {

width: 15,

color: "#000000"

},

show: false

},

}

],

yAxis : [

{

type : 'value',

axisLabel: {textStyle: {color:"#000000"}},

axisLine: {

show: true,

lineStyle: {

color:"#000000"

}

},

splitLine: {

show:false,

}

}

],

series : [

{

"name":${series},

"type":"bar",

"barWidth":35,

"data":${value},

itemStyle: {

normal: {

barBorderRadius:[5,5,5,5],

label: {

show: true,

position: 'top',

formatter: '{c}次'

}

}

},

}

]

};

// 为echarts对象加载数据

myChart.setOption(option);

}

);

</script>

5.    参考资料

(1)     Echarts2用户手册

http://echarts.baidu.com/echarts2/doc/doc.html

(2)     Echarts2配置项查找手册

http://echarts.baidu.com/echarts2/doc/option.html#title~

(3)    Echarts2官网实例

http://echarts.baidu.com/echarts2/doc/example.html1. 集算报表中使用Echarts统计图的步骤

2. 报表中添加echarts2统计图

选中需要设为统计图的单元格,点击 报表-第三方图形 菜单项,或者右键菜单-第三方图形,在图形编辑窗口中点击打开模版按钮,缺省会直接指向【安装根目录】/chart 目录,用户也可自行切换到模版的存放路径。 如果需要画的图形在已有模版中不存在, 则可以直接在编辑窗口的右侧 js 区域添加内容即可。

选择好echarts2模板打开后,程序会自动将echarts2模板中的的表达式${a}找出来列到左边的参数列表中,也可以手动增删参数。

左侧参数值可为任意类型的参数,通过 C1{}的引用方式获取报表数据为参数赋值,参数类型为数组。该引用方式通常可用于对分类、系列、系列值的取值。

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

3. 使用echarts2模板在报表中添加柱形图

(1) 新建报表,连接数据源,设置数据集,数据集名称为ds2,数据如下图所示:

(2) A1单元格表达式为=ds2.select(地区),C1单元格的表达式为=ds2.销售额,设置第一行隐藏,在A6的合并单元格中增加echarts统计图,右键A6单元格,在弹出的快捷菜单中选择第三方统计图,打开设计器下自带的echarts2柱形图的模板,在该第三方统计图的对话框左侧的参数列表中设置分类,系列的,数据的对应表达式,统计图的设置如下图所示:

报表的具体设计如下图:

以上操作就在报表中添加了柱形的Echarts图,由于echarts统计图是在页面上完成渲染的,所以我们想要看到统计图的效果需要在Web端访问,下面是在web端的显示效果:

4. 美化echarts统计图

上面我们通过自带的echart2柱形模板做的统计图看着并不美观,我们可以通过修改echarts模板的图表选项option配置将统计图美化成下图的效果:

图表选项,包含图表实例任何可配置选项: 公共选项 , 组件选项 , 数据选项。

Echarts统计图的组件有十个:Axis(坐标轴)、 xAxis横轴(默认类目型)、 yAxis 纵轴(数值型)、Grid(网格)、Polar(极坐标)、Title(标题)、legend(图例)、

DataZoom(数据区域缩放)、DataRange(值域漫游)、Toolbox(工具箱)、Timeline

(时间轴)。

上图中的效果主要操作的组件是:

Legend,grid,xAxis,yAxis,series。

明确了设置的组件,我们可以通过echarts的配置项查找工具了解其具体的属性配置,例如需将图例不显示,那么我们找到legend中show的选项查看到该选项可设置的属性值,具体设置为:

legend: {

show:false,

},

如果想调整柱子的宽度那么操作的是series这个组件的barWidth选项,如:

Series:{

"type":"bar",

“barWidth”:35,

}

概括说明下其设置规则为:

组件名称:{

选项名称:选项值,

},

注:多个选项用英文的逗号分隔,多个组件之间也需用英文的逗号分隔。

下面是对于原有Echarts模板修改后的完整JS模板:

<!-- 为ECharts准备一个具备大小(宽高)的Dom -->

<div id='id_15766045428286741' style="width:${width}px;height:${height}px"></div>

<!-- ECharts单文件引入 -->

<!-- <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> -->

<script type="text/javascript">

require(

[

'echarts',

'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载

],

function (ec) {

// 基于准备好的dom,初始化echarts图表

var myChart = ec.init(document.getElementById('id_15766045428286741'));

var option = {

backgroundColor: "#000000", //全图背景色

tooltip: {

show: false

},

legend: {

data:${series},

show:false //图例隐藏

},

grid: {width: '80%',height: '50%',left: '50%', borderColor:"#000000", x: 40, x2: 6, y: 30, y2: 2},

xAxis : [

{

type : 'category', //坐标轴类型

data : ${categories},

axisLabel: {textStyle: {color:"#C2C2C2"}}, axisTick: {

alignWithLabel: true,

lineStyle: {

width: 18,

color: "#FFFFFF"

},

show: false,

},

axisLine: {

show: false,

lineStyle: {

color: "#000000"

}

},

splitLine: {

lineStyle: {

width: 15,

color: "#000000"

},

show: false

},

}

],

yAxis : [

{

type : 'value',

axisLabel: {textStyle: {color:"#000000"}},

axisLine: {

show: true,

lineStyle: {

color: "#000000"

}

},

splitLine: {

show: false,

}

}

],

series : [

{

"name":${series},

"type":"bar",

"barWidth":35,

"data":${value},

itemStyle: {

normal: {

barBorderRadius:[5,5,5,5],

label: {

show: true,

position: 'top',

formatter: '{c}次'

}

}

},

}

]

};

// 为echarts对象加载数据

myChart.setOption(option);

}

);

</script>

5. 参考资料

(1) Echarts2用户手册

http://echarts.baidu.com/echarts2/doc/doc.html

(2) Echarts2配置项查找手册

http://echarts.baidu.com/echarts2/doc/option.html#title~

(3) Echarts2官网实例

http://echarts.baidu.com/echarts2/doc/example.html

润乾报表如何使用Echarts的更多相关文章

  1. tomcat下部署润乾报表

    因为项目需要,需要在项目中配置润乾报表,之前一直是用的jboss服务器,此处调整为tomcat时出错,然后各种找错,找答案,最后终于好了,然后总结一下. 首先在apache-tomcat-6.0.43 ...

  2. 今天我碰到了由于web.xml文件表头信息导致润乾报表启动失败的问题,解决方案如下

    下面是从2.3,2.4.2.5 3.0集中版本的web.xml头信息的细节,当发现系统启动不报错但是该生成的功能没有正常生成,特别是在这次配置润乾报表的时候发现用2.4版本的时候,在web.xml中配 ...

  3. 润乾报表JSF FORM 标签中使用填报表解决方案

     需求 润乾报表的标签需要在jsf页面中和其他填报控件一起使用,润乾报表负责展现录入部分数据,并且这部分数据和页面的其它控件的数据存在前台和后台的交互. 问题 润乾报表在前台会生成自己的form, ...

  4. 润乾报表新功能–导出excel支持锁定表头

     在以往的报表设计中,锁定表头是会经常被用到的一个功能,这个功能不仅能使浏览的页面更加直观,信息对应的更加准确,而且也提高了报表的美观程度.但是,很多客户在将这样的报表导出excel时发现exce ...

  5. 润乾报表与DERBY数据库的创建连接详解

     1. 问题概述 1.Derby数据库的创建过程 2.润乾报表连接Derby数据库展现数据 概述: Derby是Apache Software Foundation (ASF)的一个的孵化器项目. ...

  6. 润乾报表整合到Tomcat服务器的部署过程

    转载自:http://www.cnblogs.com/avivaye/archive/2012/11/16/2773681.html 使用第三方的报表设计器/服务器来快速的开发报表. 润乾服务器是使用 ...

  7. 润乾报表在proxool应用下的数据源配置

     大多数应用会使用proxool数据连接池,proxool.xml的配置文件如下: <?xml version="1.0″ encoding="UTF-8″?> & ...

  8. 润乾报表一个页面中的echarts地图与其他区块的联动

    需求概述: DBD样式效果如下图所示,需要点击左侧地图中的地区,右侧的仪表盘,柱线图可以对应显示对应该地区的数据. 实现思路: 分别制作带有地图.仪表盘.柱线图的3张报表:将3张报表放到DBD中设置布 ...

  9. 润乾报表之制作List列表

    一般情况洗啊,如果sql查到多条数据,使用表格扩展的方式在一张表格里面(横展.纵展):目前的需求是,以报表为单位,做成List.例如,如果查出3条数据,预览的时候,要有3张格式相同内容有异的报表.如图 ...

随机推荐

  1. centos 7 初始化脚本

    #!/bin/bash # 时间: 2018-11-21 # 作者: HuYuan # 描述: CentOS 7 初始化脚本 # 加载配置文件 if [ -n "${1}" ];t ...

  2. script全局变量

    javascript全局变量的生命周期是:直到页面关闭才失效.否则一直有用. 方式1 1 2 var test; var test = 5; 需注意的是该句不能包含在function内,否则是局部变量 ...

  3. C语言-apache mod(模块开发)-采用apxs开发实战(centos7.2 linux篇)

    C语言-apache mod(模块开发)-采用apxs开发实战(centos7.2 linux篇) 名词解释:apxs apxs is a tool for building and installi ...

  4. 剑指offer二十五之复杂链表的复制

    一.题目 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否 ...

  5. (转)python中math模块常用的方法整理

    原文:https://www.cnblogs.com/renpingsheng/p/7171950.html#ceil ceil:取大于等于x的最小的整数值,如果x是一个整数,则返回x copysig ...

  6. Aop学习笔记系列一

    一.Aop解决了什么问题? 1.在说解决了什么问题之前,先介绍一些关键的知识点 a.功能需求:功能需求指项目中的增值需求,比如业务逻辑,UI,持久化(数据库). b.非功能需求:项目中次要的,但却不可 ...

  7. [转]你真的了解 console 吗

    原文:https://segmentfault.com/a/1190000000481884 对于前端开发者来说,在开发过程中需要监控某些表达式或变量的值的时候,用 debugger 会显得过于笨重, ...

  8. 3DES在Android、Ios 和Java 平台的加密解密

      DES简介:      DES全称为Data Encryption Standard,即数据加密标准,是一种使用密钥加密的块算法, 算法的入口参数有三个:Key.Data.Mode.      K ...

  9. pygame游戏开发-简介

    转自白月黑羽Python教程:http://www.python3.vip/doc/tutorial/python/game/ 推荐对Python有兴趣的童鞋可以关注去看看,教程语言平实,简单易懂. ...

  10. C/C++中的常量到底存在了什么地方

    一般来说,基本类型(整型.字符型等)常量会在编译阶段被编译成立即数,占的是代码段的内存.(代码段是只读的,而且不允程序员获取代码段的地址,所以在c++中,尽量不为const分配数据段的内存,但是一旦取 ...