通過DataGear的參數化數據集、圖表事件處理和看板API功能，可以很方便地製作聯動異步加載圖表的數據可視化看板。
首先，新建一個參數化SQL數據集，如下所示：
SELECT
COL_NAME, --地區名
COL_VALUE, --地區指標數值
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 山東
然後，使用上述數據集，新建兩個圖表，第一個是展示全國指標的地圖圖表：
圖表類型：基本地圖
數據集列標記：
COL_NAME：地區名稱 (name)
COL_VALUE：指標數值 (value)
第二個是展示指定地區指標的柱狀圖：
圖表類型：基本柱狀圖
數據集列標記：
COL_NAME：名稱 (name)
COL_VALUE：數值 (value)
然後，新建可視化看板，填寫如下看板模板內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dg-chart{
display: inline-block;
width: 600px;
height: 500px;
}
#loadChartWrapper{
position:absolute;
top:0;
left:650px;
width:400px;
height:300px;
box-shadow: 0px 0px 6px #474747;
-webkit-box-shadow: 0px 0px 6px #474747;
display:none;
}
#loadChart{
position:absolute;
top:2em;
left:0;
right:0;
bottom:0;
}
</style>
<script type="text/javascript">
function chartClickHandler(chartEvent)
{
//獲取點擊的地區名
var name = chartEvent.data.name;
$("#chartTitle").html(name);
var $chart = $("#loadChart");
//圖表已加載，直接刷新數據
if(chartFactory.isChartElement($chart))
{
var chart = dashboard.getChart("loadChart");
chart.dataSetParamValue(0, 0, name);
chart.refreshData();
$("#loadChartWrapper").show();
}
//圖表未加載
else
{
dashboard.loadChart($("#loadChart"), "[第二個圖表ID]",function(chart)
{
chart.dataSetParamValue(0, 0, name);
$("#loadChartWrapper").show();
});
}
}
$(function()
{
$("#removeChartBtn").click(function()
{
dashboard.removeChart("loadChart");
$("#loadChartWrapper").hide();
});
});
</script>
</head>
<body class="dg-dashboard">
<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 class="dg-chart" dg-chart-on-click="chartClickHandler"
dg-chart-disable-setting="true"
dg-chart-widget="[第一個圖表ID]">
<!--全國指標--></div>
<div id="loadChartWrapper">
<div id="chartTitle" style="position:absolute;top:2px;left:4px;font-weight:bold;"></div>
<button id="removeChartBtn" style="position:absolute;top:2px;right:2px;">X</button>
<div id="loadChart" dg-chart-disable-setting="true"
dg-chart-options="{title:{show:false},legend:{show:false},grid:{top:30}}">
<!--待加載的圖表元素--></div>
</div>
</div>
</body>
</html>
點擊[保存並展示]按鈕，打開看板展示頁面，完成！！！
注意，上述模板中的“[第一個圖表ID]”、“[第二個圖表ID]”要替換爲實際的ID。
效果圖如下所示：
源碼地址：
Gitee：https://gitee.com/datagear/datagear
Github：https://github.com/datageartech/datagear
大屏模板地址：https://gitee.com/datagear/DataGearDashboardTemplate