共计 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
