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
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/[email protected]/dist/vue.min.js
Element UI下载地址：
https://unpkg.com/[email protected]/lib/theme-chalk/index.css
https://unpkg.com/[email protected]/lib/index.js
https://unpkg.com/[email protected]/lib/theme-chalk/fonts/element-icons.woff
加入后的看板资源如下所示：
index.html
lib/
|-- [email protected]/
|-- index.js
|-- theme-chalk/
|-- fonts/
|-- element-icons.woff
|-- index.css
|-- [email protected]/
|-- vue.min.js
加入看板资源后，编写
index.html
内容如下：
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><linkrel="stylesheet"href="lib/[email protected]/theme-chalk/index.css"><scriptsrc="lib/[email protected]/vue.min.js"></script><scriptsrc="lib/[email protected]/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><divid="app"><el-form:inline="true":model="formData"style="text-align:center;"><el-form-itemlabel="地区"><el-selectv-model="formData.region"placeholder="选择地区"><el-optionv-for="r in regions":label="r.name":value="r.name"></el-option></el-select></el-form-item><el-form-itemlabel="日期"><el-date-pickerv-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-buttontype="primary"icon="el-icon-search"@click="onSubmit">查询</el-button></el-form-item></el-form></div><divstyle="display:grid;width:100%;height:350px;grid-template-rows:repeat(1, 1fr);grid-template-columns:repeat(2, 1fr);margin:1em 0;"><div><divstyle="width:100%;height:100%;"dg-chart-widget="69618ab82184e18bf65e"dg-chart-disable-setting="true"></div></div><div><divstyle="width:100%;height:100%;"dg-chart-widget="465ecf09e184e18c3ebe"dg-chart-disable-setting="true"></div></div></div><!--隐藏的自定义图表，使用图表监听器将地区列表数据填充至vue对象--><divdg-chart-widget="6cda06067184e18b118d"style="display:none;"dg-chart-listener="regionChartListener"></div></body></html><script>var vueApp =newVue({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>
保存，看板制作完成！
效果图如下所示：
官网地址：
源码地址：
本文转载自: https://blog.csdn.net/datagear/article/details/128192459
版权归原作者 DataGear 所有， 如有侵权，请联系我们删除。
版权归原作者 DataGear 所有， 如有侵权，请联系我们删除。