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的那张著名的友邻图,抑或因为<数据可视化之美>中介绍飞行模式的航线图,总之,流向地图以它特殊的可视化形式,直观地展示事物之间的联系,尤其在展示网络流向.贸 ...
随机推荐
- [转帖]JAVA⽣态的微服务⽆侵⼊链路追踪
https://v5.6-docs.rainbond.com/docs/v5.3/advanced-scenarios/devops/pinpoint/#pinpoint%E7%AE%80%E4%BB ...
- css中使用蒙层会带来哪些问题。
css中使用蒙层会带来哪些问题. 1==> 如果蒙层设置的背景颜色或者透明度. 蒙层里面的子集元素将会受到影响: 此时子集元素可能不能注册点击的事件. 因为蒙层将它覆盖住了 2==> 此时 ...
- 【0基础学爬虫】爬虫基础之自动化工具 Pyppeteer 的使用
大数据时代,各行各业对数据采集的需求日益增多,网络爬虫的运用也更为广泛,越来越多的人开始学习网络爬虫这项技术,K哥爬虫此前已经推出不少爬虫进阶.逆向相关文章,为实现从易到难全方位覆盖,特设[0基础学爬 ...
- Python 潮流周刊#22：Python 3.12.0 发布了！！
你好,我是猫哥.这里每周分享优质的 Python.AI 及通用技术内容,大部分为英文.标题取自其中一则分享,不代表全部内容都是该主题,特此声明. 本周刊由 Python猫 出品,精心筛选国内外的 25 ...
- word文档删除空白页
记住两个快捷键 CTRL+Backspace Shift+Backspace 鼠标箭头放在空白的页面 按住键盘上的快捷键 就可以成功删除了不要天天看营销号设置什么磅值,全选删除啥的 效果如下
- conda创建虚拟环境后文件夹中只有conda-meta文件夹，无法将环境添加到IDE中
1.问题描述:anaconda的envs的其中一个环境目录下,没有python.exe文件,只有conda-meta和scripts 平时创建虚拟环境都是: conda create -n test ...
- 深入浅出Java多线程(四)：线程状态
引言 大家好,我是你们的老伙计秀才!今天带来的是[深入浅出Java多线程]系列的第四篇内容:线程状态.大家觉得有用请点赞,喜欢请关注!秀才在此谢过大家了!!! 在现代软件开发中,多线程编程已经成为提升 ...
- 史上最大电池！小米智能家庭屏Pro 8图赏
今天小米智能家庭屏 Pro 8正式开售,集智能家居中控,智能网关以及娱乐教育三大功能为一体,首发749元. 它是一款全新的智能生态产品中控屏,配备了7500mAh大容量电池以及通用性更好的USB Ty ...
- 基于Hyper-V搭建免费桌面云
Hyper-V 是 Microsoft 的硬件虚拟化产品. 它用于创建并运行计算机的软件版本,称为"虚拟机". 每个虚拟机都像一台完整的计算机一样运行操作系统和程序. 如果需要计算 ...
- CentOS 安装字体
问题来源,今天服务端生成中文图片验证码的Base64字符串,结果返回到客户端后,解码Base64发现是乱码,怀疑是Centos 系统不包含中文字体的问题, 安装字体后,果然问题解决了,以后做系统镜像的 ...