报表中的地图怎么做?

简介: 地图

在地图上展现地域相关的数据,是在公共设施管理、交通、电信、城市建设、能源、电力、农业等国民经济相关的应用系统中是比较常见的直观图表形式。以前,如果在报表应用系统中需要显示地图相关的信息,开发人员可能会第一时间想到 GIS(Geographic Information Software 地理信息软件),但是 GIS 的体系较大,需要开发人员定义 GIS 中被执行的各种任务,开发相应的处理程序。 熟练的操作人员甚至还需要克服 GIS 软件功能的不足。事实上,如果只是想做个地图显示数据,完全不必要用这么大的牛刀哦!
现在 echarts 这个小鲸鱼做地图数据呈现可以帮助我们轻松做出地图数据呈现,而润乾报表则将 echarts 脚本集成到了设计器下,在根据类别选好要做的地图模板后,通过设置下几个参数,一个数据地图就轻松完成了。
我们先来看几个润乾内置的 echarts 地图效果吧!
1
2

怎么样,是不是很酷炫?下面我们再通过一个例子,看看如此酷炫的地图是不是还需要那么复杂步骤……
1、数据准备
连接数据源,新建报表,增加数据集。不论数据集是采用哪种方式得到的,最终整理好后的数据都应该是下面的格式。哈哈,不用紧张,字段名可以不一样哟。
3

注意:第二个字段城市的名字,省份的名字中一定不要出现省市的字样,例如:北京,不要写成北京市;黑龙江,不要写成黑龙江省,否则,会出现对应省市的数据在统计图中无法对应的情况。

  1. 单元格中添加 echarts 统计图模板。
    (1)选统计图 JS 模板

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

(2)设置统计图所需参数值。
参数列表中的参数值可以引用数据集数据,是通过润乾报表提供的 json@a() 函数将数据集转换成二维数组的 json 串。具体参考教程中 json 函数说明。
5

点击确定后,我们就可以在 web 端发布报表,看看统计图的效果了。

  1. 在 jsp 中引入中国地图的 js.
    Echarts.jsp 在 demo/reportJsp 目录下,在该页面中已经带有中国的 js 了,如下图所示。

如果是其他省份的地图要对应在该页面中添加。
6

  1. Web 端查看效果。
    内置 tomcat 启动的情况下点击 IE 图标,在浏览器中就可以看到我们直接通过模板做出的地图了。

7

做省份的地图和国家地图,步骤也相同,现在我扩展下,简单说下:

省份的 JS 所在的目录是:raqsoft_180514_2reportwebwebappsdemoraqsoftecharts3mapjsprovince。

这个目录下省份的 JS 文件名称都是对应省份的全拼,如:宁夏回族自治区对应“ningxia”. 这样就出现山西和陕西同名的情况,shanxi.js 对应的是山西,shanxi1.js 对应的是陕西。

在 jsp 中引入对应省份的 JS 脚本。

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

目录
相关文章
|
10月前
|
搜索推荐 数据可视化 JavaScript
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
138 1
|
10月前
|
小程序 定位技术
记录一款基于地图标注点展示的微信小程序开发过程纪要
记录整理一款基于地图的微信小程序开发过程,主要涉及标注点展示,可视范围内标注点动态更新,标注点自定义气泡,气泡点击及气泡内容实时更新
102 0
|
10月前
|
监控 搜索推荐 数据可视化
漏刻有时垃圾分类回收数据可视化大屏监控源代码百度地图标注及地图个性化处理方案
漏刻有时垃圾分类回收数据可视化大屏监控源代码百度地图标注及地图个性化处理方案
68 0
|
10月前
|
缓存 前端开发 数据可视化
漏刻有时数据可视化大屏常见问题(5)修改样式表和图表核心库页面无变化
漏刻有时数据可视化大屏常见问题(5)修改样式表和图表核心库页面无变化
76 0
|
10月前
|
数据采集 监控 数据可视化
做出酷炫的动态统计图表,不一定要写代码
首先这个名字很长的,就是上面 GDP 图表的作者 Jannchie见齐 基于 D3.js 开发的 将历史数据排名转化为动态柱状图图表 的项目,并在 github 上开源了。
|
11月前
|
机器学习/深度学习
gtsummary|巧合-绘制多种数据汇总表“神器”
gtsummary|巧合-绘制多种数据汇总表“神器”
126 0
|
BI 数据库
汇总报表怎么做,如何设计实现汇总报表?
汇总报表怎么做,如何设计实现汇总报表?
|
JavaScript 前端开发 数据可视化
【前端搞地图】如何设计一张让用户过目不忘的地图
【前端搞地图】如何设计一张让用户过目不忘的地图
【前端搞地图】如何设计一张让用户过目不忘的地图
|
前端开发 定位技术 开发者
【前端搞地图】如何设计一张让用户过目不忘的地图-2
【前端搞地图】如何设计一张让用户过目不忘的地图-2
【前端搞地图】如何设计一张让用户过目不忘的地图-2
|
编解码 数据可视化 定位技术
Qt编写数据可视化大屏界面电子看板8-调整间距
一、前言 在数据可视化大屏界面电子看板系统中,前期为了使用目标客户机,调整间距是必不可少的工作,QMainWindow中的QDockWidget,会默认生成布局和QSplitter调整宽高大小,鼠标移动到模块之间的缝隙处,鼠标指针会形成调整大小间距的那种,上下左右拉动就可以调整大小了。
1488 0