DataGear 輕鬆製做支持圖表聯動的全國地圖、省級地圖數據可視化看板

DataGear看板的圖表聯動功能，使您能夠輕鬆製做支持圖表聯動的全國地圖、省級地圖數據可視化看板。css

首先，新建兩個數據集。html

第一個是各省指標數據集，將用於繪製全國指標圖表，它的SQL語句以下所示：git

SELECT
	COL_NAME,
	COL_VALUE
FROM
	T_ANALYSIS_PROVINCE

第二個是指定省的各市指標數據集，將用於繪製省級指標圖表，它是一個參數化數據集，其中，參數化SQL語句爲：sql

SELECT
	'${省份}' AS COL_MAP,
	COL_NAME,
	COL_VALUE
FROM
	T_ANALYSIS_CITY
WHERE
	COL_PROVINCE = '${省份}'

參數定義爲：spa

參數名      類型      必填
省份        字符串    是

而後，使用上述兩個數據集分別創建全國指標圖表、省級指標圖表。code

全國指標圖表：htm

圖表類型      : 基本地圖
數據集        : 各省指標數據集
數據集列標記  : COL_NAME 地區名稱；COL_VALUE 指標數值

省級指標圖表：blog

圖表類型      : 基本地圖
數據集        : 各市指標數據集
數據集列標記  : COL_NAME 地區名稱；COL_VALUE 指標數值；COL_MAP 地圖名

而後，新建可視化看板，填寫以下看板模板內容：字符串

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dg-chart{
  display: inline-block;
}
</style>
</head>
<body class="dg-dashboard">
  <div class="dg-chart" dg-chart-link="{target:'chart0',data:{name:0}}" dg-chart-widget="全國指標圖表ID" style="width:700px;height:600px;"></div>
  <div id="chart0" class="dg-chart" dg-chart-widget="省級指標圖表ID" style="width:400px;height:400px;"></div>
</body>
</html>

點擊[保存並展現]按鈕，打開看板展現頁面，完成！！！get

效果圖以下所示：

官網地址：http://www.datagear.tech

源碼地址：https://gitee.com/datagear/datagear

大屏模板地址：https://gitee.com/datagear/DataGearDashboardTemplate