DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板

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表中所有地区名：

selectdistinct(col_name) as name
fromt_region_date_value

制作地区日期指标SQL数据集，这是一个参数化数据集，可以查询t_region_date_value表中指定地区、日期范围的数据：

selectcol_date, col_value
fromt_region_date_value
wherecol_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

DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板相关推荐

闲云旅游网04（基于vue+element ui）完成机票数据列表渲染
机票列表页渲染列表数据项目GitHub地址:https://github.com/q2419068625/xianyun 1.请求接口数据 <template><section ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
基于vue2+element+springboot+mybatis+jpa+mysql的学籍管理系统
目录整套系统源码下载一.开发背景二.用到的技术三.开发使用的IDE 四.搭建开发环境五.启动项目六.学籍管理系统使用说明七.结语八.源码下载基于vue2+element+spring ...
基于 layui 的纯前端框架 cy-ui
cy-ui 详细介绍 cy-ui 基于layui的纯前端框架框架说明 1.基于原生layui源码,替换layui文件即可完成升级! 2.前端声明式组件封装.附带文档编写 ctrl+c ctrl+v ...
基于vue2+element+springboot+mysql+jpa+mybatis的图书管理系统
目录整套系统源码下载 1.图书管理系统pc端 2.图书借阅系统app端源码一.开发背景二.用到的技术三.开发使用的IDE 四.搭建开发环境五.启动项目六.图书管理系统使用说明七.结语八 ...
基于vue2+element+springboot+mybatis+jpa+mysql的幼儿园幼儿信息管理系统
目录整套系统源码下载一.开发背景二.用到的技术三.开发使用的IDE 四.搭建开发环境五.启动项目六.幼儿园幼儿信息管理系统使用说明七.结语八.整套系统源码下载整套系统源码下载基于v ...
基于vue2+element+springboot+mybatis+jpa+mysql的小区物业管理系统
目录一.开发背景二.用到的技术三.开发使用的IDE 四.搭建开发环境五.启动项目六.物业管理系统使用说明七.结语八.整套项目源码下载一.开发背景本系统作为vue2初学者的入门系统,通 ...
YDUI移动端微信UI前端框架
下载地址 YDUI:一个注重审美,且性能高效的移动端&微信UI.YDUI移动端&微信UI前端框架. dd:
LayUi前端框架删除数据缓存问题（解决删除后刷新页面内容又会显示问题）
LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题) 参考文章: (1)LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题) (2)https://www.cn ...

DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板

DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板相关推荐

最新文章

热门文章