对于数据可视化，有时需要根据用户输入的查询条件展示限定范围的数据图表，DataGear的看板表单功能可以快速方便地实现此类需求。
下面的看板示例，包含一个柱状图、一个饼图和一个地图，用户可以通过看板表单设置柱状图和饼图的数据数目，设置地图的显示地区。
首先，新建三个参数化数据集。
第一个数据集的SQL语句为：
1SELECT 2 COL_NAME, 3 COL_VALUE 4FROM 5 T_ANALYSIS_0 6limit 0, ${查询数目}
参数定义为：
1参数名 类型 必填 2查询数目 数值 是
第二个数据集与第一个类似，SQL语句为：
1SELECT 2 COL_NAME, 3 COL_VALUE 4FROM 5 T_ANALYSIS_1 6limit 0, ${查询数目}
参数定义为：
1参数名 类型 必填 2查询数目 数值 是
第三个数据集的SQL语句为：
1SELECT 2 '${省份}' AS COL_MAP, 3 COL_NAME, 4 COL_VALUE 5FROM 6 T_ANALYSIS_CITY 7WHERE 8 COL_PROVINCE = '${省份}'
参数定义为：
1参数名 类型 必填 2省份 字符串 是
然后，使用上述三个数据集分别建立柱状图、饼图、地图。
第一个柱状图：
1图表类型 : 基本柱状图 2数据集 : 第一个数据集 3数据集列标记 : COL_NAME 名称；COL_VALUE 数值
第二个饼图：
1图表类型 : 基本饼图 2数据集 : 第二个数据集 3数据集列标记 : COL_NAME 名称；COL_VALUE 数值
第三个地图：
1图表类型 : 基本基本 2数据集 : 第三个数据集 3数据集列标记 : COL_NAME 地区名称；COL_VALUE 指标数值；COL_MAP 地图名
然后，新建可视化看板，填写如下看板模板内容：
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>DataGear 看板示例</title> 6<style type="text/css"> 7.dg-chart{ 8 display: inline-block; 9 width: 400px; 10 height: 400px; 11} 12</style> 13<script type="text/javascript"> 14//看板表单配置 15var dashboardFormConfig = 16{ 17 items: 18 [ 19 {name:"图表1-数目", type:"NUMBER", link: 0}, 20 {name:"图表2-数目", type:"NUMBER", link: {chart:1}}, 21 { 22 name:"图表3-地区", inputType:"select", 23 inputPayload: 24 [ 25 {name:'',value:''}, 26 {name:' 北京 ',value:'北京'}, 27 {name:' 山东 ',value:'山东'}, 28 {name:' 江苏 ',value:'江苏'}, 29 {name:' 上海 ',value:'上海'} 30 ], 31 link: {chart:2} 32 } 33 ], 34 link: ["chart1", "chart2", "chart3"], 35 submitText: "查询" 36}; 37</script> 38</head> 39<body class="dg-dashboard"> 40<div style="position: absolute;left:1;top:1;font-size:12px;"> 41 DataGear <br> http://www.datagear.tech 42</div> 43<div style="font-size:2em;text-align:center;margin-bottom:5px;">DataGear 看板示例</div> 44<p> </p> 45<form dg-dashboard-form="dashboardFormConfig" class="dg-inline"></form> 46<p> </p> 47<div id="chart1" class="dg-chart" dg-chart-widget="[第一个图表ID]"></div> 48<div id="chart2" class="dg-chart" dg-chart-widget="[第一个图表ID]"></div> 49<div id="chart3" class="dg-chart" dg-chart-widget="[第三个图表ID]"></div> 50</body> 51</html>
点击[保存并展示]按钮，打开看板展示页面，完成！！！
效果图如下所示：
源码地址：
Gitee：https://gitee.com/datagear/datagear