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的那张著名的友邻图,抑或因为<数据可视化之美>中介绍飞行模式的航线图,总之,流向地图以它特殊的可视化形式,直观地展示事物之间的联系,尤其在展示网络流向.贸 ...
随机推荐
- [转帖]HotSpot 虚拟机对象探秘
https://www.cnblogs.com/xiaojiesir/p/15593092.html 对象的创建 一个对象创建的时候,到底是在堆上分配,还是在栈上分配呢?这和两个方面有关:对象的类型和 ...
- 物联网浏览器(IoTBrowser)-Web串口自定义开发
物联网浏览器(IoTBrowser)-Web串口自定义开发 工控系统中绝大部分硬件使用串口通讯,不论是原始串口通讯协议还是基于串口的Modbus-RTU协议,在代码成面都是使用System.IO.Po ...
- 【JS 逆向百例】某公共资源交易网，公告 URL 参数逆向分析
声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 逆向目标 目标:某地公共资 ...
- Gin 框架之用户密码加密
目录 一.引入 二.密码加密位置 三.如何加密 四.bcrypt 库加密 4.1 介绍 4.2 优点: 4.3 使用 五.小黄书密码加密实践 一.引入 Gin是一个用Go语言编写的Web框架,而用户密 ...
- SqlSugar基础查询
查所有 List<Student> list=db.Queryable<Student>().ToList() //select * from Student 查询总数 int ...
- 2.基于Label studio的训练数据标注指南：（智能文档）文档抽取任务、PDF、表格、图片抽取标注等
文档抽取任务Label Studio使用指南 1.基于Label studio的训练数据标注指南:信息抽取(实体关系抽取).文本分类等 2.基于Label studio的训练数据标注指南:(智能文档) ...
- windows共享文件创建----局域网办公
一.共享文件设置 1.选择要共享的文件夹-----右键点击属性--------在上方选项栏选择共享----然后点击"高级共享" 2.勾选"共享此文件夹"---- ...
- 分布式缓存-Redis集群
一.单点Redis弊端 1.数据丢失问题:Redis是内存存储,服务器重启可能会丢失数据 2.并发能力问题:单节点Redis并发能力虽然不错,但也无法满足如618这样的高并发场景 3.故障恢复问题:如 ...
- gcc-11/g++-11安装
终端依次输入 sudo add-apt-repository ppa:ubuntu-toolchain-r/test #添加工具链存储库 sudo apt-get install gcc-11 #安装 ...
- .NET 云原生架构师训练营（模块二 基础巩固 日志）--学习笔记
2.2.2 核心模块--日志 ILogger 的使用 日志的 ID 日志的分类 日志的级别 LoggerProvider 日志的最佳实践 .NET Core 和 ASP.NET Core 中的日志记录 ...