润乾报表如何使用Echarts
1. 润乾报表中使用Echarts统计图的步骤
2. 报表中添加echarts2统计图
选中需要设为统计图的单元格,点击 报表-第三方图形 菜单项,或者右键菜单-第三方图形,在图形编辑窗口中点击打开模版按钮,缺省会直接指向【安装根目录】/chart 目录,用户也可自行切换到模版的存放路径。 如果需要画的图形在已有模版中不存在, 则可以直接在编辑窗口的右侧 js 区域添加内容即可。
选择好echarts2模板打开后,程序会自动将echarts2模板中的的表达式${a}找出来列到左边的参数列表中,也可以手动增删参数。
左侧参数值可为任意类型的参数,通过 C1{}的引用方式获取报表数据为参数赋值,参数类型为数组。该引用方式通常可用于对分类、系列、系列值的取值。
设置好统计图的属性,点击【确定】按钮,设计器中选中的单元格就自动的插入了统计图,可通过 web 预览查看第三方图形。
3. 使用echarts2模板在报表中添加柱形图
新建报表,连接数据源,设置数据集,数据集名称为ds2,数据如下图所示:
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的更多相关文章
- tomcat下部署润乾报表
因为项目需要,需要在项目中配置润乾报表,之前一直是用的jboss服务器,此处调整为tomcat时出错,然后各种找错,找答案,最后终于好了,然后总结一下. 首先在apache-tomcat-6.0.43 ...
- 今天我碰到了由于web.xml文件表头信息导致润乾报表启动失败的问题,解决方案如下
下面是从2.3,2.4.2.5 3.0集中版本的web.xml头信息的细节,当发现系统启动不报错但是该生成的功能没有正常生成,特别是在这次配置润乾报表的时候发现用2.4版本的时候,在web.xml中配 ...
- 润乾报表JSF FORM 标签中使用填报表解决方案
需求 润乾报表的标签需要在jsf页面中和其他填报控件一起使用,润乾报表负责展现录入部分数据,并且这部分数据和页面的其它控件的数据存在前台和后台的交互. 问题 润乾报表在前台会生成自己的form, ...
- 润乾报表新功能–导出excel支持锁定表头
在以往的报表设计中,锁定表头是会经常被用到的一个功能,这个功能不仅能使浏览的页面更加直观,信息对应的更加准确,而且也提高了报表的美观程度.但是,很多客户在将这样的报表导出excel时发现exce ...
- 润乾报表与DERBY数据库的创建连接详解
1. 问题概述 1.Derby数据库的创建过程 2.润乾报表连接Derby数据库展现数据 概述: Derby是Apache Software Foundation (ASF)的一个的孵化器项目. ...
- 润乾报表整合到Tomcat服务器的部署过程
转载自:http://www.cnblogs.com/avivaye/archive/2012/11/16/2773681.html 使用第三方的报表设计器/服务器来快速的开发报表. 润乾服务器是使用 ...
- 润乾报表在proxool应用下的数据源配置
大多数应用会使用proxool数据连接池,proxool.xml的配置文件如下: <?xml version="1.0″ encoding="UTF-8″?> & ...
- 润乾报表一个页面中的echarts地图与其他区块的联动
需求概述: DBD样式效果如下图所示,需要点击左侧地图中的地区,右侧的仪表盘,柱线图可以对应显示对应该地区的数据. 实现思路: 分别制作带有地图.仪表盘.柱线图的3张报表:将3张报表放到DBD中设置布 ...
- 润乾报表之制作List列表
一般情况洗啊,如果sql查到多条数据,使用表格扩展的方式在一张表格里面(横展.纵展):目前的需求是,以报表为单位,做成List.例如,如果查出3条数据,预览的时候,要有3张格式相同内容有异的报表.如图 ...
随机推荐
- centos 7 初始化脚本
#!/bin/bash # 时间: 2018-11-21 # 作者: HuYuan # 描述: CentOS 7 初始化脚本 # 加载配置文件 if [ -n "${1}" ];t ...
- script全局变量
javascript全局变量的生命周期是:直到页面关闭才失效.否则一直有用. 方式1 1 2 var test; var test = 5; 需注意的是该句不能包含在function内,否则是局部变量 ...
- C语言-apache mod(模块开发)-采用apxs开发实战(centos7.2 linux篇)
C语言-apache mod(模块开发)-采用apxs开发实战(centos7.2 linux篇) 名词解释:apxs apxs is a tool for building and installi ...
- 剑指offer二十五之复杂链表的复制
一.题目 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否 ...
- (转)python中math模块常用的方法整理
原文:https://www.cnblogs.com/renpingsheng/p/7171950.html#ceil ceil:取大于等于x的最小的整数值,如果x是一个整数,则返回x copysig ...
- Aop学习笔记系列一
一.Aop解决了什么问题? 1.在说解决了什么问题之前,先介绍一些关键的知识点 a.功能需求:功能需求指项目中的增值需求,比如业务逻辑,UI,持久化(数据库). b.非功能需求:项目中次要的,但却不可 ...
- [转]你真的了解 console 吗
原文:https://segmentfault.com/a/1190000000481884 对于前端开发者来说,在开发过程中需要监控某些表达式或变量的值的时候,用 debugger 会显得过于笨重, ...
- 3DES在Android、Ios 和Java 平台的加密解密
DES简介: DES全称为Data Encryption Standard,即数据加密标准,是一种使用密钥加密的块算法, 算法的入口参数有三个:Key.Data.Mode. K ...
- pygame游戏开发-简介
转自白月黑羽Python教程:http://www.python3.vip/doc/tutorial/python/game/ 推荐对Python有兴趣的童鞋可以关注去看看,教程语言平实,简单易懂. ...
- C/C++中的常量到底存在了什么地方
一般来说,基本类型(整型.字符型等)常量会在编译阶段被编译成立即数,占的是代码段的内存.(代码段是只读的,而且不允程序员获取代码段的地址,所以在c++中,尽量不为const分配数据段的内存,但是一旦取 ...