DataGear 制作支持全国、省、市三级数据钻取效果的地图数据可视化看板
通过DataGear的参数化数据集、图表联动和看板API功能，可以很方便地制作支持数据钻取效果的数据可视化看板。
首先，以上级地区名为参数，新建一个参数化SQL数据集：
SELECT
COL_NAME, --地区名
COL_VALUE, --地区指标数值
COL_PARENT AS COL_MAP --上级地区名，同时作为地图名
FROM
T_ANALYSIS
WHERE
<#if 上级地区名??>
COL_PARENT = '${上级地区名}'
<#else>
COL_PARENT = '中国'
</#if>
参数：
名称 类型 必填
上级地区名 字符串 否
T_ANALYSIS表数据示例：
COL_NAME COL_VALUE COL_PARENT
山东 160 中国
北京 200 中国
...
朝阳区 195 北京
海淀区 200 北京
...
青岛市 10 山东
济南市 160 山东
...
历下区 50 济南市
市中区 78 济南市
历城区 150 济南市
...
然后，新建一个使用上述数据集的地图图表：
图表类型：基本地图
数据集列标记：
COL_NAME：地区名称 (name)
COL_VALUE：指标数值 (value)
COL_MAP：地图名 (map)
然后，新建可视化看板，填写如下看板模板内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dg-chart{
display: inline-block;
width: 100%;
height: 480px;
}
</style>
<script type="text/javascript">
var paramHistory = [];
var chartListener =
{
onUpdate: function(chart, results)
{
//存储当前上级地区名，用于支持返回操作
var paramVal = chart.dataSetParamValueFirst(0);
if(!paramVal)
paramHistory = [];
else
paramHistory.push(paramVal);
$("#title").html((paramVal ? paramVal : "全国") + " - 数据");
}
};
$(document).ready(function()
{
$("#backButton").click(function()
{
//获取上一次操作的上级地区名，设置为图表参数，然后刷新图表
paramHistory.pop();
var paramVal = (paramHistory.pop() || null);
var chart = dashboard.chartOf("chart1");
chart.dataSetParamValueFirst(0, paramVal);
chart.refreshData();
});
});
</script>
</head>
<body class="dg-dashboard" dg-chart-map-urls="{'济南市':'jinan.json'}">
<div style="position: absolute;left:1;top:1;font-size:12px;">
DataGear <br>
http://www.datagear.tech
</div>
<div style="font-size:2em;text-align:center;margin-bottom:5px;">DataGear 看板示例</div>
<p> </p>
<div style="position:relative">
<div id="title" style="text-align:center;font-size:1.2em;font-weight:bold;"></div>
<button id="backButton" style="position:absolute;right:2em;top:0;">返回</button>
</div>
<div id="chart1" class="dg-chart"
dg-chart-options="{title:{show:false}}"
dg-chart-link="{target:'chart1',data:{name:0}}"
dg-chart-listener="chartListener"
dg-chart-disable-setting="true"
dg-chart-widget="3fa7ecaf11742397c58b">
</div>
</body>
</html>
点击[保存并展示]按钮，打开看板展示页面，完成！！！
注：上述示例中使用了没有内置的济南市地图GeoJSON文件（jinan.json），需要通过看板编辑页面添加看板资源功能添加至看板。
推荐GeoJSON下载地址：
https://datav.aliyun.com/portal/school/atlas/area_selector
效果图如下所示：
官网地址：
http://www.datagear.tech
源码地址：
Gitee：https://gitee.com/datagear/datagear
Github：https://github.com/datageartech/datagear
DataGear 制作支持全国、省、市三级数据钻取效果的地图数据可视化看板的更多相关文章
- 百度API实例——google地图数据转化为百度地图数据
前段时间做的项目前端都是用Google地图,最近在一个地方需要用到百度地图,因为不同地图都有自己的处理,同一个经纬度在不同地图上显示的位置并不相同,因此,要把以前的数据直接拿过来用需要做一个转换.查阅 ...
- 个人永久性免费-Excel催化剂功能第96波-地图数据挖宝之全国天气查询（区域最细可到区县，最长预报4天）
天气预报的信息,是很普通的大家习以为常的信息,但如果不进行采集,在日常数据分析过程中,就少了非常重要的一个分析维度,如果人手采集整理,工作量巨大.此篇给广大数据分析工作者再次减负,只需简单一键,即可批 ...
- 高德SD地图数据生产自动化技术的路线与实践（道路篇）
一.背景及现状 近些年,国内道路交通及相关设施的基础建设日新月异.广大用户日常出行需求旺盛,对所使用到的电子地图产品的数据质量和现势性提出了更高的要求.传统的地图数据采集和生产过程,即通过采集设备实地 ...
- jQuery - 全国省市县三级联动
最近有空用jquery做了一个全国省市县的三级联动,在以后或许可以用的到 ,遗憾的是我还没用封装,等有空看能不能封装成一个插件 废话不多说,贴上代码: <!doctype html> &l ...
- 不制作证书是否能加密SQLSERVER与客户端之间传输的数据？
不制作证书是否能加密SQLSERVER与客户端之间传输的数据? 在做实验之前请先下载network monitor抓包工具 微软官网下载:http://www.microsoft.com/en-us/ ...
- 用shp制作geoJson格式地图数据(shp convert to geoJson)
本文紧接前文,简单说明利用shp数据制作Echarts支持的geoJson格式的地图数据.本文以北京市通州区各镇的shp数据为例进行说明. 软件环境: ArcGIS 10.2 (ArcGIS 10.2 ...
- 全国SHP地图数据赠送
百度搜索:GIS之家获取全国SHP图层数据的方式:收藏(ArcGIS地图全国电子地图shp格式版本GIS地图数据.GIS开发顺德政府GIS公共服务共享平台),并且截图验证,验证通过后,收下邮箱,我把下 ...
- 制作西北地区地图数据并maskout
1.从全国地图数据中选中西北5省:打开bou2_4p.shp文件添加相应的图层(中国各省的行政区域),选中工具栏中的"通过矩形选择要素"工具,用鼠标点击选择要输出的图元,按住ctr ...
- vue+element实现省区市三级联动以及详细地址的输入
Vue+elementui实现省区市三级联动+详细地址的输入 详细需求,需要手动更改用户所在的地址. 安装依赖项 npm install element-china-area-data -S 在组建中 ...
- 个人永久性免费-Excel催化剂功能第94波-地图数据挖宝之搜索地图上的各种兴趣点数据（商铺名、地名、公共设施等）
终于来到最激动人心的地图应用场景,将地图上的有价值的兴趣点数据一网打尽,全都收录在自己的数据源中,这个价值有多大,想想都兴奋,无数的商业场景可供挖掘,假如你还无动于衷,那要好好反思下自己做的数据分析的 ...
随机推荐
- [转贴]win10临时修改、永久cmd 编码格式的方法
https://www.jianshu.com/p/40a9fbaf1cac cmd 前言 有时候,运行一些命令行程序某些字符无法正常显示,常见的就是方块,或者是火星文字都是由于 cmd 程序的默 ...
- 【K哥爬虫普法】网盘用的好，“艳照门”跑不了
我国目前并未出台专门针对网络爬虫技术的法律规范,但在司法实践中,相关判决已屡见不鲜,K哥特设了"K哥爬虫普法"专栏,本栏目通过对真实案例的分析,旨在提高广大爬虫工程师的法律意识,知 ...
- TienChin 开篇-运行 RuoYiVue
开篇 目的: 让大家随心所欲的 DIY 若依的脚手架 不会涉及到太多基础知识 踊跃提问(不懂得地方大家提问我会根据提问,后续一一解答疑惑) 下载 RuoYiVue Gitee: https://git ...
- ChatGenTitle：使用百万arXiv论文信息在LLaMA模型上进行微调的论文题目生成模型
ChatGenTitle:使用百万arXiv论文信息在LLaMA模型上进行微调的论文题目生成模型 相关信息 1.训练数据集在Cornell-University/arxiv,可以直接使用: 2.正式发 ...
- 发布三个月跳水超1000！苹果M2版Mac mini降到3478元了
快科技4月18日消息,苹果在今年1月17日晚,在官网上架了新款的Mac mini,搭载了M2芯片,起售价4499元. 当时该产品配合上教育优惠,一度被认为是"香爆了"的产品,如今距 ...
- HBase-表的压缩
一.如何选择压缩算法以及Data_Block_Encoding?(1)如果Key很长,或者有很多Column,那么推荐使用FAST_DIFF.(2)如果数据是冷数据,不经常被访问,那么使用GZIP压缩 ...
- 扒开源安卓性能测试工具moblieperf源码——开发属于你自己的性能稳定性测试工具
moblieperf下载和使用 moblieperf由阿里巴巴开源的Android性能测试工具 下载:官方源码地址mobileperf github 使用: 使用pycharm打开下载的项目 使用只需 ...
- 点亮.NET的文字云艺术之光——Sdcb.WordCloud 2.0
点亮.NET的文字云艺术之光--Sdcb.WordCloud 2.0 作为一名.NET开发者,你是否渴望拥有一个强大且易用的库,用以在你的应用程序中创造美轮美奂的文字云?我在经过一轮农历新年前的码力全 ...
- CF1849
传送门 A 氵 B 在吃了五次罚时后,我终于放弃了卡常优先队列,并发现:把余 \(0\) 看作余 \(k\),答案就是余数从大到小排列的,每种余数内部又按照下标排序. C 我为什么没想到哈希?自我检讨 ...
- VMware 虚拟机一键去虚拟化工具
前言: 如果你想在 VMware 虚拟机里面多开玩游戏的话,但是现在大多数网游都会检测是否虚拟机,进入游戏被检测到在虚拟机中运行,游戏可能直接闪退.所以就得对 VMware 虚拟机进行去除虚拟化. 原 ...