开发者社区> ibelieve001> 正文

echarts 统计图如何实现打印导出

简介: echarts 统计图如何实现打印导出
+关注继续查看

为方便用户能够更好的在报表中使用 Echarts 图形,润乾报表 5 提供了对 Echarts 图形的导出与打印。但导出与打印依赖于 slimerjs 和 firefox,因此使用导出与打印前需要先按照如下步骤将环境先部署好,具体操作如下:
第一步:获取并安装 slimerjs
步骤1:获取slimerjs安装包
用户可以通过两个途径获取安装包:
(1) 报表自带安装包【安装根目录】report5webwebappsdemoraqsoftslimerjs-0.10.3.zip;
(2) 用户自己在 slimerjs 官方网站https://slimerjs.org/download.html 下载
步骤 2: 安装
将 zip 安装包解压到电脑硬盘中即可,不同操作系统安装方法都一样。
第二步:安装 firefox
从 firefox 官方网站http://www.firefox.com.cn/download/ 下载安装与操作系统对应版本的火狐浏览器即可。
目前 slimerjs 只能支持 firefox 38-52 或者更低版本,所以不要下载安装最新版本。以后新版 slimerjs 可能会支持更高的 firefox 版本。
以下是更低版本下载建议地址:
firefox49.0 版:http://ftp.mozilla.org/pub/firefox/releases/49.0/
firefox50.0 版:http://ftp.mozilla.org/pub/firefox/releases/50.0/
第三步:设置环境变量
*在windows操作系统下:
以下环境变量配置过程以 win10 系统为例

  1. 在资源管理器中鼠标右键点击“此电脑”,选择属性,弹出如下窗口:
    1
  2. 点击高级系统设置,弹出窗口后点击环境变量,再弹出如下窗口:
    2
  3. 选择新建环境变量,在弹出窗口中设置变量名为 SLIMERJSLAUNCHER,变量值为 firefox 的安装路径。
    *在linux/MacOS 操作系统下:

在命令行执行如下命令:变量值为 firefox 执行文件的全路径。
export SLIMERJSLAUNCHER=/usr/bin/firefox
用户也可以在本机的.profile 或者.bashrc 文件中设置此环境变量
第四步:复制 calcEcharts.js
如果用户是在 slimerjs 官方网站下载的安装包则需要在安装报表以后找到【安装根目录 report5webwebappsdemoraqsoftcalcEcharts.js 文件,然后复制到 slimerjs 的安装目录下。
注:若使用报表系统提供的 slimerjs 安装包,不必进行此步操作。
第五步:授权文件可执行权限
注:windows 中不需要此步操作
在命令行中进入到 slimerjs 的安装目录,然后执行如下命令:
chmod 777 ./slimerjs
chmod 777 ./calcEcharts.js
第六步:IDE 配置
打开报表,【菜单栏 - 工具 - 选项】打开文件配置窗口,然后设置 slimerjs 的安装目录。

4
第七步:Web 应用配置
在 WEB-INF/raqsoftConfig.xml 中增加了两项配置。

1、slimerjsDir 配置 slimerjs 的安装目录。
注:未配置此项,应用不具备打印和导出 echarts 的功能。
2、echartsJSUrlPrefix 配置 echarts 图形的 js 所在的父目录的访问地址,即下图中所示的 raqsoft 目录:
5

用户可以将其配置成文件绝对路径的形式,也可以配成 http 方式。
注:当应用以 war 包方式发布时,必须配置此项,且必须配置成 http 方式。
不是以 war 包方式发布时,可以不用配置此项,程序会自动设置此项。
配置完成后需要重启电脑生效!!!

作者:IBelieve
链接:http://c.raqsoft.com.cn/article/1534917903901?r=IBelieve
来源:乾学院
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Chart.js-饼状图分析(参数分析+例图)
Chart.js-饼状图分析(参数分析+例图)
43 0
Chart.js-柱状图分析(参数分析+例图)
Chart.js-柱状图分析(参数分析+例图)
58 0
echarts两个折线图共用x轴且合并tooltip功能代码
echarts两个折线图共用x轴且合并tooltip功能代码
125 0
安卓中显示表格并将表格数据以excel格式导出
安卓中显示表格并将表格数据以excel格式导出
175 0
vue中使用echarts实现动态图表多数据展示,带源码(x轴动态时间刷新,实时更新展示数据)
之前写项目,需要写一个图表动态展示出当前服务器的信息,在网上找了很多相关的文章,但是关于vue中使用echarts动态图表的内容比较少,自己写过之后就在这里记录一下,希望能够对大家有所帮助
524 0
vue中echarts实现双图联动展示数据,折线图+饼图(附带源码)
最近写项目,有一块功能需要使用双图进行联动的展示,左边折线图,鼠标移动折线图焦点,能把每个点的数据情况展示到饼图上,这里记录一下,希望对大家有帮助
201 0
Echarts 实现树状图的展示与编辑示例
Echarts 实现树状图的展示与编辑示例
278 0
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
3411 0
Qt+ECharts开发笔记(五):ECharts的动态排序柱状图介绍、基础使用和Qt封装Demo
上一篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口。   本篇的demo实现了自动排序的柱状图,实现了一个自动排序柱状图的基本交互方式,即Qt调用js脚本操作html。   本篇demo使用Qt定时器方式,实现数据定时刷新自增,并预留出了定时器间隔参数。   像大数据网页常看的人口增长时间图,收入年度增长时间图等都是这一类。
193 0
vue再读48-表格案例-搜索按钮实现功能
vue再读48-表格案例-搜索按钮实现功能
106 0
+关注
ibelieve001
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载