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 namefrom t_region_date_value
制作地区日期指标
SQL数据集,这是一个参数化数据集,能够查问t_region_date_value
表中指定地区、日期范畴的数据:
select col_date, col_valuefrom t_region_date_valuewhere 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.htmllib/ |-- 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