在地图上展现地域相关的数据,是在公共设施管理、交通、电信、城市建设、能源、电力、农业等国民经济相关的应用系统中是比较常见的直观图表形式。以前,如果在报表应用系统中需要显示地图相关的信息,开发人员可能会第一时间想到 GIS(Geographic Information Software 地理信息软件),但是 GIS 的体系较大,需要开发人员定义 GIS 中被执行的各种任务,开发相应的处理程序。 熟练的操作人员甚至还需要克服 GIS 软件功能的不足。事实上,如果只是想做个地图显示数据,完全不必要用这么大的牛刀哦!

现在 echarts 这个小鲸鱼做地图数据呈现可以帮助我们轻松做出地图数据呈现,而润乾报表则将 echarts 脚本集成到了设计器下,在根据类别选好要做的地图模板后,通过设置下几个参数,一个数据地图就轻松完成了。

我们先来看几个润乾内置的 echarts 地图效果吧!

怎么样,是不是很酷炫?下面我们再通过一个例子,看看如此酷炫的地图是不是还需要那么复杂步骤……

1、数据准备

连接数据源,新建报表,增加数据集。不论数据集是采用哪种方式得到的,最终整理好后的数据都应该是下面的格式。哈哈,不用紧张,字段名可以不一样哟。

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

2. 单元格中添加 echarts 统计图模板。

(1)选统计图 JS 模板

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

(2)设置统计图所需参数值。

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

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

3. 在 jsp 中引入中国地图的 js.

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

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

4. Web 端查看效果。

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

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

  • 省份的 JS 所在的目录是:raqsoft_180514_2\report\web\webapps\demo\raqsoft\echarts3\map\js\province。

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

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

转载于:https://my.oschina.net/u/3651044/blog/3001002

报表中的地图怎么做?相关推荐

  1. mysql 表 地图_报表中的地图怎么做?

    在地图上展现地域相关的数据,是在公共设施管理.交通.电信.城市建设.能源.电力.农业等国民经济相关的应用系统中是比较常见的直观图表形式.以前,如果在报表应用系统中需要显示地图相关的信息,开发人员可能会 ...

  2. 报表中能实现中国地图钻取到各省地图吗?

    地图类问题,目前 echarts 做的比较专业,设置起来还比较灵活,找一个支持 echarts 的报表工具就可以,在报表中处理数据,然后将数据注入 echarts 图用来展示,在 echarts 里可 ...

  3. Tableau筛选器:仪表板中运用地图做筛选器

    在Tableau仪表板中,希望实现报表的联动,比如报表A以地图的形式展示各省/自治区的利润情况,报表B显示某个地区各类别产品的利润情况,希望点击A报表中的北京,B报表就显示北京各类别产品的利润情况.将 ...

  4. 报表中如何实现中国地图钻取到各省地图

    需求描述: 使用 Echarts 统计图从中国地图,点击某一省份,在新的页面中显示该省份的地图. 实现思路: 在国家地图上添加 onclick 事件,点击国家地图中的省份,生成省份对应的 url, 其 ...

  5. 报表中如何实现中国地图钻取到各省地图?

    需求描述: 使用 Echarts 统计图从中国地图,点击某一省份,在新的页面中显示该省份的地图. 实现思路: 在国家地图上添加 onclick 事件,点击国家地图中的省份,生成省份对应的 url, 其 ...

  6. vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现

    高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...

  7. CMRNet++:在激光雷达地图中与地图和相机无关的单目视觉定位

    点击上方"3D视觉工坊",选择"星标" 干货第一时间送达 编辑丨当SLAM遇见小王同学 声明: 本文只是个人学习记录,侵权可删.论文版权与著作权等全归原作者所有 ...

  8. python软件是干什么用的-python中的django是做什么的

    Django是什么? Django是一个基于Python的Web应用框架.它与Python的另外一个Web 框架 Flask最大的区别是,它奉行 "包含一切" 的哲学.该理念即为: ...

  9. 在水晶报表中实现任意选择指定字段显示-模板及C#升级版

    前文<在水晶报表中实现任意选择指定字段显示>中有朋友留言说是有无C#版本,最近有时间,重写了一下. 一是使用了VS2005 C#2.0 + Crystal Report 2008,另外就是 ...

最新文章

  1. Spring Cloud 第十一篇:docker部署spring cloud项目
  2. 操作系统的八股文自述(持续更新)
  3. CV】keras_resnet 在cifar10数据集上分类
  4. 食品安全溯源区块链解决方案探索-转载
  5. 【2012百度之星/初赛上】C:集合的交与并
  6. list lt t gt java_将DataTable转换成Listlt;Tgt;实现思路及示例代码
  7. Apache JMeter 下载
  8. sqlite3的sql语句用法总结与SQLite生成.db-journal文件问题【原创】
  9. 机器学习和AI的Python基础
  10. 回馈顾客, 活动搞起 --- 策略模式
  11. Node.js中使用pipe拷贝大文件不能完全拷贝的解决办法
  12. 全三轨磁条卡读写器|写卡器MSR606的驱动安装与Demo软件测试操作指南
  13. python教程视频ajax_Ajax异步请求实战案例讲解视频教程
  14. php 1---100之间的和 几种方法
  15. 在Mac环境下查看附近路由器的MAC地址
  16. libtorrent编译
  17. 谐波叠加法matlab,谐波叠加法 可运行程序,分享不谢
  18. android 系统更新版本比较好,手机系统到底要不要更新 这里面有什么猫腻?
  19. Linux V4L2框架的视频采集
  20. 抖音短视频APP开发通过三种方式绘制图片

热门文章

  1. 功放限幅保护_限幅放大器功能
  2. 微信小程序实现柱形图与折现图
  3. php程序员需要什么资质,微信小程序服务类目及资质要求
  4. 《动手实现一款简单的拦阻球游戏》
  5. The bean ‘employServiceImpl‘ could not be injected as a ‘com.itcast.reggie.service.impl.EmployServic
  6. git 解决push报错:[rejected] master -> master (fetch first)
  7. MT6762 datasheet,MT6762规格书,MT6762芯片参数资料
  8. 计算机应用基础18秋在线作业2奥鹏,奥鹏15春北航《计算机应用基础》在线作业2答案...
  9. 静心戒躁--半个学期来的小结
  10. 事件A和B之间相互独立与互不相容的理解