通过DataGear的参数化数据集、图表联动和看板API性能，能够很不便地制作反对数据钻取成果的数据可视化看板。

首先，以下级地区名为参数，新建一个参数化SQL数据集：

SELECT    COL_NAME,              --地区名    COL_VALUE,             --地区指标数值    COL_PARENT AS COL_MAP  --下级地区名，同时作为地图名FROM    T_ANALYSISWHERE<#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