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

原创

已于 2022-12-05 21:28:53 修改 · 3.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#数据可视化 #数据分析 #echarts #vue #elementui

于 2022-12-05 20:19:04 首次发布

本文介绍如何利用Vue2和ElementUI增强DataGear数据可视化看板的交互性，通过自定义图表和参数化数据集实现动态数据展示。

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/

最低0.47元/天解锁文章