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

DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板的更多相关文章

  1. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  2. 基于 iframe 的微前端框架 —— 擎天

    vivo 互联网前端团队- Jiang Zuohan 一.背景 VAPD是一款专为团队协作办公场景设计的项目管理工具,实践敏捷开发与持续交付,以「项目」为核心,融合需求.任务.缺陷等应用,使用敏捷迭代 ...

  3. 基于Vue2.x的前端架构，我们是这么做的

    通过Vue CLI可以方便的创建一个Vue项目,但是对于实际项目来说还是不够的,所以一般都会根据业务的情况来在其基础上添加一些共性能力,减少创建新项目时的一些重复操作,本着学习和分享的目的,本文会介绍 ...

  4. 基于 vue+element ui 的cdn网站（多页面，都是各种demo）

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  5. 软件测试自动化之- 基于反射的UI自动化测试框架 - UI Automation Test Framework

    测试自动化程序的任务 基于反射的ui测试自动化程序,要完成的6项任务: 通过某种方式从测试套件程序中运行待测程序(AUT: Applicaton Under Test),以便于两个程序之间进行通信 操 ...

  6. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

  7. 解决模糊查询问题 element UI 从服务器搜索数据，输入关键字进行查找

    做项目是遇见下拉框的形式,后台返回来3万多条,用element UI中的select选择器中的搜索还是会造成页面卡顿和系统崩溃,因此用了它的远程搜索功能,发现还不错,解决了这个问题. 代码1 < ...

  8. B-JUI(Best jQuery UI) 前端框架

    From :http://b-jui.com/大略看了下还不错,收藏之.

  9. Onsen UI 前端框架（二）

    上一章介绍了OnsenUI一些入门的知识以及它和AngularJS配合的初始化方法.这一章,咱们继续对这块内容进行介绍,对OnsenUI提供的组件进行更进一步的学习. 咱们从手机应用布局的最上面开始. ...

  10. LayUi前端框架删除数据缓存问题（解决删除后刷新页面内容又会显示问题）

    form.on('submit(mySearch)', function(data){ table.reload('userTable', {//就会读取后台数据,重新加载: page: { curr ...

随机推荐

  1. ELK搭建简单说明

    ELK搭建简单说明 简单说明 周天陪孩子学习,自己简单研究了下如何处理 不是很系统,仅是能够展示部分文件的日志. 需要有很多坑需要进行填充. 搭建模式 自己采取rpm包方式进行搭建 183 机器上面安 ...

  2. es6 Array.form将类数组或者对象转化为数组

    Array.from()方法就是将一个[类数组对象][或者可遍历对象]转换成一个[真正的数组] 那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象. let array ...

  3. 【JS 逆向百例】反混淆入门，某鹏教育 JS 混淆还原

    关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后 ...

  4. Registration Authority 简介

    RA 功能简介 在公共密钥基础设施(PKI)中,CA(Certificate Authority,证书颁发机构)系统的RA(Registration Authority,注册机构)是PKI体系结构的重 ...

  5. PaddleNLP基于ERNIR3.0文本分类以CAIL2018-SMALL数据集罪名预测任务为例【多标签】

    相关项目链接: Paddlenlp之UIE模型实战实体抽取任务[打车数据.快递单] Paddlenlp之UIE分类模型[以情感倾向分析新闻分类为例]含智能标注方案) 应用实践:分类模型大集成者[Pad ...

  6. 2.0 熟悉CheatEngine修改器

    Cheat Engine 一般简称为CE,它是一款功能强大的开源内存修改工具,其主要功能包括.内存扫描.十六进制编辑器.动态调试功能于一体,且该工具自身附带了脚本工具,可以用它很方便的生成自己的脚本窗 ...

  7. C/C++ Qt 命令行版网络通信

    通常情况下Qt如果需要建立网络通信则必须依附于图形界面,但如果是新手入门,图形界面则显得太过于繁琐不利于学习原理,如下本人实现了命令行版本的网络通信案例,能够让读者更好的理解Qt是如何创建网络通信套接 ...

  8. cs50ai2

    cs50ai2-------Uncertainty cs50ai2-------Uncertainty 基础知识 课后题目 代码实践 学习链接 总结 基础知识 在这节课中,前面主要介绍了一些概率论的基 ...

  9. C++ GDAL提取多时相遥感影像中像素随时间变化的数值数组

      本文介绍基于C++语言GDAL库,批量读取大量栅格遥感影像文件,并生成各像元数值的时间序列数组的方法.   首先,我们来明确一下本文所需实现的需求.现在有一个文件夹,其中包含了很多不同格式的文件, ...

  10. (Python)每日代码||2024.1.17||函数中给列表形参默认值时，该默认列表在函数中的改变会保留下来

    def f(x,li=[1]): print(id(li)) li.append(x) print(li) f('a')#第一次调用函数 print() f('b')#第二次调用函数 print() ...