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的那张著名的友邻图,抑或因为<数据可视化之美>中介绍飞行模式的航线图,总之,流向地图以它特殊的可视化形式,直观地展示事物之间的联系,尤其在展示网络流向.贸 ...
随机推荐
- [转帖]Linux命令拾遗-top中的%nice是啥
https://www.cnblogs.com/codelogs/p/16060663.html 简介# 这是Linux命令拾遗系列的第八篇,本篇主要介绍top命令中nice%这个指标的含义以及进程优 ...
- 什么是根号？什么是 log ？
生日悖论是 \(O(\sqrt{n})\) 随机序列 LIS 是 \(O(\sqrt{n})\) 随机 \(\pm1\) 序列前缀和最大绝对值是 \(O(\sqrt{n})\) 证明 随机 Prufe ...
- # github突破7k star 即时通讯（IM）开源项目OpenIM每周迭代版本发布
v2.0已经重构完毕,架构更清晰,代码更规范,邀请各位参与OpenIM社区建设有兴趣的同学可以加我私聊. 目前侧正在业务开发,已提供更多功能,包括群管理,阅后即焚,朋友圈,标签下发等. web端体验: ...
- easyUI 多表头设置
- layui之静态表格的分页及搜索功能以及前端使用XLSX导出Excel功能
LayUI官方文档:https://layui.dev/docs/2/#introduce XLSX NPM地址:https://www.npmjs.com/package/xlsx XLSX 使用参 ...
- vscode中文搜索乱码或搜索不到
使用vscode在全局搜索时,代码中的内容无法搜索出来,或者搜索出来是乱码. 经验证:与vscode的语言设置无关,设置为中文或英文都是一样的 后面猜想到会不会与文件自身的编码有关,因为我们项目中的代 ...
- 窗口管理器 dwm安装
上一篇博文中,已经完成了archlinux的安装,但是进去仅仅是一个冰冷冷的交互式命令窗口.没有图像,也无法打开浏览器.离日常使用还差的很远,接下来首先需要做的就是安装桌面环境.这里我不打算使用诸如g ...
- TienChin 渠道管理-添加渠道页面开发
略过,前面已将渠道管理的 index.vue 文件内容全部粘贴给你们了.
- Hadoop3 No FileSystem for scheme "hdfs"
Hadoop3 No FileSystem for scheme "hdfs" 异常信息: org.apache.hadoop.fs.UnsupportedFileSystemEx ...
- （python）每日代码||2024.1.27||类方法与实例方法
class test(): aaa = 111 bbb = 222 ccc = 333 @classmethod def cm(cls): cls.aaa="***" def im ...