通过DataGear的参数化数据集、图表事件处理和看板API功能，可以很方便地制作联动异步加载图表的数据可视化看板。
首先，新建一个参数化SQL数据集，如下所示：
1SELECT 2 COL_NAME, --地区名 3 COL_VALUE, --地区指标数值 4FROM 5 T_ANALYSIS 6WHERE 7<#if 上级地区名??> 8 COL_PARENT='${上级地区名}' 9<#else> 10 COL_PARENT='中国' 11</#if>
参数：
1名称 类型 必填 2上级地区名 字符串 否
T_ANALYSIS表数据示例：
1COL_NAME COL_VALUE COL_PARENT 2山东 160 中国 3北京 200 中国 4... 5朝阳区 195 北京 6海淀区 200 北京 7... 8青岛市 10 山东 9济南市 160 山东
然后，使用上述数据集，新建两个图表，第一个是展示全国指标的地图图表：
1图表类型：基本地图 2数据集列标记： 3COL_NAME：地区名称 (name) 4COL_VALUE：指标数值 (value)
第二个是展示指定地区指标的柱状图：
1图表类型：基本柱状图 2数据集列标记： 3COL_NAME：名称 (name) 4COL_VALUE：数值 (value)
然后，新建可视化看板，填写如下看板模板内容：
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title></title> 6<style type="text/css"> 7.dg-chart{ 8 display: inline-block; 9 width: 600px; 10 height: 500px; 11} 12#loadChartWrapper{ 13 position:absolute; 14 top:0; 15 left:650px; 16 width:400px; 17 height:300px; 18 box-shadow: 0px 0px 6px #474747; 19 -webkit-box-shadow: 0px 0px 6px #474747; 20 display:none; 21} 22#loadChart{ 23 position:absolute; 24 top:2em; 25 left:0; 26 right:0; 27 bottom:0; 28} 29</style> 30<script type="text/javascript"> 31function chartClickHandler(chartEvent) 32{ 33 //获取点击的地区名 34 var name = chartEvent.data.name; 35 $("#chartTitle").html(name); 36 37 var $chart = $("#loadChart"); 38 39 //图表已加载，直接刷新数据 40 if(chartFactory.isChartElement($chart)) 41 { 42 var chart = dashboard.getChart("loadChart"); 43 chart.dataSetParamValue(0, 0, name); 44 chart.refreshData(); 45 $("#loadChartWrapper").show(); 46 } 47 //图表未加载 48 else 49 { 50 dashboard.loadChart($("#loadChart"), "[第二个图表ID]",function(chart) 51 { 52 chart.dataSetParamValue(0, 0, name); 53 $("#loadChartWrapper").show(); 54 }); 55 } 56} 57$(function() 58{ 59 $("#removeChartBtn").click(function() 60 { 61 dashboard.removeChart("loadChart"); 62 $("#loadChartWrapper").hide(); 63 }); 64}); 65</script> 66</head> 67<body class="dg-dashboard"> 68<div style="position: absolute;left:1;top:1;font-size:12px;"> 69 DataGear <br> 70 http://www.datagear.tech 71</div> 72<div style="font-size:2em;text-align:center;margin-bottom:5px;">DataGear 看板示例</div> 73<p> </p> 74<div style="position:relative;"> 75 <div class="dg-chart" dg-chart-on-click="chartClickHandler" 76 dg-chart-disable-setting="true" 77 dg-chart-widget="[第一个图表ID]"> 78 <!--全国指标--></div> 79 80 <div id="loadChartWrapper"> 81 <div id="chartTitle" style="position:absolute;top:2px;left:4px;font-weight:bold;"></div> 82 <button id="removeChartBtn" style="position:absolute;top:2px;right:2px;">X</button> 83 <div id="loadChart" dg-chart-disable-setting="true" 84 dg-chart-options="{title:{show:false},legend:{show:false},grid:{top:30}}"> 85 <!--待加载的图表元素--></div> 86 </div> 87</div> 88</body> 89</html>
点击[保存并展示]按钮，打开看板展示页面，完成！！！
注意，上述模板中的“[第一个图表ID]”、“[第二个图表ID]”要替换为实际的ID。
效果图如下所示：
源码地址：
Gitee：https://gitee.com/datagear/datagear