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

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

首先,新建兩個數據集。

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

SELECT
	COL_NAME,
	COL_VALUE
FROM
	T_ANALYSIS_PROVINCE

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

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

參數定義爲:

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

然後,使用上述兩個數據集分別建立全國指標圖表、省級指標圖表。

全國指標圖表:

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

省級指標圖表:

圖表類型      : 基本地圖
數據集        : 各市指標數據集
數據集列標記  : 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>

點擊[保存並展示]按鈕,打開看板展示頁面,完成!!!

效果圖如下所示:

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

源碼地址:

Gitee:https://gitee.com/datagear/datagear

Github:https://github.com/datageartech/datagear

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章