共计 3529 个字符，预计需要花费 9 分钟才能阅读完成。
DataGear 数据可视化看板内置了一些根本、简略的页面交互组件，当它们无奈满足理论看板需要时，能够引入更风行和弱小的前端框架。
本文以 Vue2、Element UI 前端框架为例，介绍如何制作具备更丰盛交互组件性能的数据可视化看板。
假如有数据库表t_region_date_value，数据结构为：
col_name, col_date, col_value
地区一, 2022-01-01, 30
地区一, 2022-01-02, 90
地区一, 2022-01-03, 50
...
地区二, 2022-01-01, 20
地区二, 2022-01-02, 30
地区二, 2022-01-03, 60
...
地区三, 2022-01-01, 80
地区三, 2022-01-02, 60
地区三, 2022-01-03, 30
...首先，制作 地区列表 SQL 数据集，用于列出t_region_date_value 表中所有地区名：
select
distinct(col_name) as name
from
t_region_date_value制作 地区日期指标 SQL 数据集，这是一个参数化数据集，能够查问t_region_date_value 表中指定地区、日期范畴的数据：
select
col_date, col_value
from
t_region_date_value
where
col_name = '${地区名}'
and col_date >= '${起始日期}'
and col_date <= '${终止日期}'参数：
名称 类型 必填
地区名 字符串 是
起始日期 字符串 是
终止日期 字符串 是而后，制作图表：
地区列表 图表是自定义图表，用于为前面制作看板的地区下拉列表提供数据，不绘制为具体图表：
名称：地区列表
图表类型：自定义图表
数据集：地区列表
数据标记：无地区日期指标 - 柱状图 图表以柱状图的模式展现上述 地区日期指标 数据集的数据：
名称：地区日期指标 - 柱状图
图表类型：根本柱状图
数据集：地区日期指标
数据标记：属性：col_date -> 名称 (name)
属性：col_value -> 数值 (value)地区日期指标 - 表格 图表以表格的模式展现上述 地区日期指标 数据集的数据：
名称：地区日期指标 - 表格
图表类型：根本表格
数据集：地区日期指标
数据标记：无 而后，新建空白看板，填写名称后，先保留。
在编写看板页面之前，须要先下载 Vue2、Element UI 库，退出看板资源中。
Vue2 下载地址：
https://unpkg.com/vue@2.7.14/dist/vue.min.js
Element UI 下载地址：
https://unpkg.com/element-ui@2.15.12/lib/theme-chalk/index.css
https://unpkg.com/element-ui@2.15.12/lib/index.js
https://unpkg.com/element-ui@2.15.12/lib/theme-chalk/fonts/element-icons.woff
退出后的看板资源如下所示：
index.html
lib/
|-- element-ui@2.15.12/
|-- index.js
|-- theme-chalk/
|-- fonts/
|-- element-icons.woff
|-- index.css
|-- vue@2.7.14/
|-- vue.min.js退出看板资源后，编写 index.html 内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="lib/element-ui@2.15.12/theme-chalk/index.css">
<script src="lib/vue@2.7.14/vue.min.js"></script>
<script src="lib/element-ui@2.15.12/index.js"></script>
<script>
var regionChartListener=
{update: function(chart, results)
{var cds = chart.chartDataSetMain();
var regions = chart.resultDataOf(results, cds);
vueApp.regions = regions;
}
};
</script>
</head>
<body>
<div id="app">
<el-form :inline="true" :model="formData" style="text-align:center;">
<el-form-item label="地区">
<el-select v-model="formData.region" placeholder="抉择地区">
<el-option v-for="r in regions" :label="r.name" :value="r.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="日期">
<el-date-picker v-model="formData.dateRange" type="daterange"
range-separator="至" start-placeholder="开始日期" end-placeholder="完结日期"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="onSubmit"> 查问 </el-button>
</el-form-item>
</el-form>
</div>
<div style="display:grid;width:100%;height:350px;grid-template-rows:repeat(1, 1fr);grid-template-columns:repeat(2, 1fr);margin:1em 0;">
<div>
<div style="width:100%;height:100%;"
dg-chart-widget="69618ab82184e18bf65e" dg-chart-disable-setting="true">
</div>
</div>
<div>
<div style="width:100%;height:100%;"
dg-chart-widget="465ecf09e184e18c3ebe" dg-chart-disable-setting="true">
</div>
</div>
</div>
<!-- 暗藏的自定义图表，应用图表监听器将地区列表数据填充至 vue 对象 -->
<div dg-chart-widget="6cda06067184e18b118d" style="display:none;" dg-chart-listener="regionChartListener"></div>
</body>
</html>
<script>
var vueApp = new Vue({
el: '#app',
data() {
let d = {regions: [],
formData: {
region: '',
dateRange: ['2022-01-01', '']
}
};
return d;
},
methods: {onSubmit() {
const fd = this.formData;
// 将表单数据设置为这两个图表的数据及参数后刷新图表
let chart0 = dashboard.chartOf(0);
let chart1 = dashboard.chartOf(1);
chart0.dataSetParamValuesFirst([fd.region, fd.dateRange[0], fd.dateRange[1] ]);
chart1.dataSetParamValuesFirst([fd.region, fd.dateRange[0], fd.dateRange[1] ]);
chart0.refreshData();
chart1.refreshData();}
}
})
</script>保留，看板制作实现！
效果图如下所示：
官网地址：
http://www.datagear.tech
源码地址：
Gitee：https://gitee.com/datagear/datagear
Github：https://github.com/datageartech/datagear
