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