DataGear 制作全国和省级地图联动的数据可视化看板
DataGear看板的图表联动功能，使您可以轻松制作支持图表联动的全国地图、省级地图数据可视化看板。
首先，新建两个数据集。
第一个是各省指标数据集，将用于绘制全国指标图表，它的SQL语句如下所示：
SELECT
COL_NAME,
COL_VALUE
FROM
T_ANALYSIS_PROVINCE
它的数据示例如下：
COL_NAME COL_VALUE
北京 150
山东 120
江苏 60
...
第二个是指定省的各市指标数据集，将用于绘制省级指标图表，它是一个参数化数据集，其中，参数化SQL语句为：
SELECT
'${省份}' AS COL_MAP,
COL_NAME,
COL_VALUE
FROM
T_ANALYSIS_CITY
WHERE
COL_PROVINCE = '${省份}'
参数定义为：
参数名 类型 必填
省份 字符串 是
它的数据示例如下：
COL_NAME COL_VALUE COL_PROVINCE
海淀区 35 北京
西城区 80 北京
济南市 60 山东
威海市 20 山东
盐城市 10 江苏
徐州市 50 江苏
...
然后，使用上述两个数据集分别建立全国指标图表、省级指标图表。
全国指标图表：
图表类型 : 基本地图
数据集 : 各省指标数据集
数据集列标记 : COL_NAME 地区名称；COL_VALUE 指标数值
省级指标图表：
图表类型 : 基本地图
数据集 : 各市指标数据集
数据集列标记 : COL_NAME 地区名称；COL_VALUE 指标数值；COL_MAP 地图名
然后，新建可视化看板，填写如下看板模板内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dg-chart{
display: inline-block;
}
</style>
</head>
<body class="dg-dashboard">
<div class="dg-chart"
dg-chart-link="{target:'chart0',data:{name:0}}"
dg-chart-widget="全国指标图表ID" style="width:700px;height:600px;"></div>
<div id="chart0" class="dg-chart"
dg-chart-widget="省级指标图表ID" style="width:400px;height:400px;"></div>
</body>
</html>
点击[保存并展示]按钮，打开看板展示页面，完成！！！
效果图如下所示：
源码地址：
Gitee：https://gitee.com/datagear/datagear
Github：https://github.com/datageartech/datagear
DataGear 制作全国和省级地图联动的数据可视化看板的更多相关文章
- 前端使用d3.js调用地图api 进行数据可视化
前段时间自己研究了demo就是把某个区域的某个位置通过经纬度在地图上可视化.其实就是使用了第三方插件,比现在比较火的可视化插件d3.js echart.js.大致思路就是,把要用到的位置的geojso ...
- 【云图】如何制作全国KTV查询系统？
原文:[云图]如何制作全国KTV查询系统? 摘要:本文以[唱吧]531麦霸音乐节为案例,详细解读了如何导入自有数据到高德云图,并进行检索和展示.最后,调起高德mobile地图来进行路线规划和周边查询. ...
- 数据可视化地图制作教程，这个免费BI软件轻松搞定
数据可视化地图制作教程 现在做数据分析基本上离不开数据可视化,在大量的数据中,有很大一部分数据都与地理信息相关,因此,在数据可视化中,可视化地图是非常重要的一部分.无论是新闻报道,还是商业分析报告, ...
- jQuery - 全国省市县三级联动
最近有空用jquery做了一个全国省市县的三级联动,在以后或许可以用的到 ,遗憾的是我还没用封装,等有空看能不能封装成一个插件 废话不多说,贴上代码: <!doctype html> &l ...
- ArcGIS JS 学习笔记4 实现地图联动
1.开篇 守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而且鼠标也有联动,我就照着这个目标进行山寨. 2.准备 ...
- 【百度地图API】如何制作一张魔兽地图！！——CS地图也可以，哈哈哈
原文:[百度地图API]如何制作一张魔兽地图!!--CS地图也可以,哈哈哈 摘要: 你玩魔兽不?你知道如何做一张魔兽地图不?! 快来看此文吧! ---------------------------- ...
- 百度LBS开放平台个性化地图 制作一款独一无二的地图
百度LBS开放平台个性化地图 制作一款独一无二的地图 天天用百度地图的亲们是否已不再满足仅仅看例如以下的地图样式了呢? 默认百度地图样式 是否特别渴望看特别不一样的地图呢.如带京城81号气息的午夜蓝 ...
- ArcGIS API For Javascript ：双屏（多屏）地图联动的方法
在遇到地图对比的应用场景下,我们需要双屏地图或者多屏地图来满足我们的业务需求. 解决思路:首先生成两份(多份)地图,然后通过监听地图缩放拖拽,用地图四至将不同的地图对象做绑定,实现多地图联动. 前端部 ...
- 数据可视化之 图表篇（二）如何用Power BI制作疫情地图？
丁香园制作的这个地图可视化,相信大家每天都会看好几遍,这里不讨论具体数据,仅来探讨一下PowerBI地图技术. 这个地图很简洁,主要有三个特征: 1,使用着色地图,根据数据自动配色 2,只显示中国地图 ...
- ArcGIS制作放射状流向地图（Radial Flow Map）
流向地图火了,因为Facebook的那张著名的友邻图,抑或因为<数据可视化之美>中介绍飞行模式的航线图,总之,流向地图以它特殊的可视化形式,直观地展示事物之间的联系,尤其在展示网络流向.贸 ...
随机推荐
- 工单 工序外协 更改PR/PO
工序外协详解介绍'https://blog.csdn.net/weixin_43814706/article/details/113586961' 需求:创建工序委外的工单时更改对应PR/PO 行文本 ...
- XCODE IOS 静态链接库替换升级
XCODE 版本15.2. 一个很久需求没更新的IOS 应用,近来有新需求要开发. 拉下代码运行,出现了个BAD_ACCESS错误.出错的位置位于一个调用的第三方的.a静态库内部.因为调用代码并没有修 ...
- node+express+ multer 实现文件上传入门
文件上传 文件上传需要借助一个中间件 multer 因此我们需要安装 cnpm install multer --save 前端界面 在express创建的项目下的 public/upload目录下创 ...
- 【学到了】golang的[]byte可以append string类型的数据
上代码: func Test_use_string(t *testing.T){ arr := make([]byte,0, 100) arr = append(arr, "abcd&quo ...
- Ubuntu编译Xilinx的u-boot
博主这里的是Ubuntu20.04LTS+Vivado2017.4+ZedBoard 注意:本文使用的环境变量导入方法是临时的,只要退出当前终端或者使用其他终端就会失效,出现异常问题,请随时expor ...
- 手撕Vue-数据驱动界面改变上
经过上一篇的介绍,已经实现了监听数据的变化,接下来就是要实现数据变化后,界面也跟着变化,这就是数据驱动界面改变. 想要实现数据变化之后更新UI界面,我们可以使用发布订阅模式来实现,先定义一个观察者类, ...
- 快递单信息抽取【二】基于ERNIE1.0至ErnieGram + CRF预训练模型
相关文章: 1.快递单中抽取关键信息[一]----基于BiGRU+CR+预训练的词向量优化 2.快递单信息抽取[二]基于ERNIE1.0至ErnieGram + CRF预训练模型 3.快递单信息抽取[ ...
- 解决： DECODER_ERROR_CLASSES += (brotli.error,) ttributeError: module ‘brotli‘ has no attribute ‘error‘
解决: DECODER_ERROR_CLASSES += (brotli.error,) ttributeError: module 'brotli' has no attribute 'error' ...
- C/C++ 原生套接字抓取FTP数据包
网络通信在今天的信息时代中扮演着至关重要的角色,而对网络数据包进行捕获与分析则是网络管理.网络安全等领域中不可或缺的一项技术.本文将深入介绍基于原始套接字的网络数据包捕获与分析工具,通过实时监控网络流 ...
- 《重学Java设计模式》作者开始录视频了！
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 1. 前言 哈哈哈,终于对B站下手了! 大家好,我是小傅哥,在紧张.羞涩到适应后,哈哈哈,终于 ...