DataGear 制作基于Vue2、Element UI弹窗效果的数据可视化看板

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

DataGear 在4.4.0版本新增了dg-chart-manual-render特性用于手动控制看板内图表的渲染而非在页面加载时自动渲染。利用这一特性可以很方便制作具有弹窗效果的数据可视化看板。

本文以Vue2、Element UI 前端框架为例介绍如何制作具有弹窗效果的数据可视化看板。

假设有数据库表t_analysis其中存储了各省、市的指标数据数据结构为

COL_NAME,  COL_VALUE,  COL_PARENT
北京,      200,        中国
内蒙古,    50,         中国
辽宁,      100,        中国
山东,      160,        中国
山西,      160,        中国
河北,      230,        中国
海淀区,    200,        北京
昌平区,    160,        北京
西城区,    180,        北京
怀柔区,    130,        北京
朝阳区,    195,        北京
济南市,    160,        山东
德州市,    80,         山东
烟台市,    40,         山东
青岛市,    10,         山东
...

首先新建一个参数化SQL数据集用于查询指定地区的指标如下所示

SELECT
    COL_NAME,
	COL_VALUE
FROM
    t_analysis
WHERE
<#if 上级地区??>
    COL_PARENT='${上级地区}'
<#else>
    COL_PARENT='中国'
</#if>

参数为

名称         类型     必填
上级地区    字符串   否

此数据集在传入了上级地区参数后查询指定地区内的指标默认查询上级地区为中国的指标。

然后新建两个关联上述数据集的图表

第一个是展示全国指标的地图图表

图表类型基本地图
数据集列标记
COL_NAME地区名称 (name)
COL_VALUE指标数值 (value)

第二个是展示指定地区指标的柱状图

图表类型基本柱状图
数据集列标记
COL_NAME名称 (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>
//地图图表的点击处理函数
function chartClickHandler(chartEvent)
{
  let vueApp = dashboard.vueApp;
  
  vueApp.dialogTitle = chartEvent.data.name;
  vueApp.dialogVisible = true;
  //保存点击的地区名下面将作为参数传递
  vueApp.dialogChartParam = chartEvent.data.name;
}
</script>
</head>
<body dg-chart-auto-resize="true">
<div id="app">
  <h1 style="text-align:center;">DataGear看板示例</h1>
  <div dg-chart-on-click="chartClickHandler" dg-chart-options="{series:[{select:{disabled:true}}]}"
    dg-chart-disable-setting="true" dg-chart-widget="第一个图表ID" style="width:40%;height:60vh;">
  </div>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%" @opened="onDialogOpened" @closed="onDialogClosed">
    <div id="dialogChart" dg-chart-manual-render="true" dg-chart-widget="第二个图表ID"
	  dg-chart-disable-setting="true" dg-chart-options="{title:{show:false},legend:{show:false},grid:{top:30}}"
	  style="height:50vh;">
    </div>
  </el-dialog>
</div>
</body>
</html>
<script>
new Vue(
{
  el: '#app',
  data()
  {
    let d =
    {
      dialogTitle: "",
      dialogVisible: false,
      dialogChartParam: ""
    };
    return d;
  },
  mounted()
  {
    dashboard.vueApp = this;
  },
  methods:
  {
    onDialogOpened()
    {
	  //打开对话框后设置图表参数并执行渲染
      let dialogChart = dashboard.chartOf("dialogChart");
      dialogChart.dataSetParamValueFirst(0, this.dialogChartParam);
      dialogChart.render();
    },
    onDialogClosed: function()
    {
	  //关闭对话框后销毁图表
      let dialogChart = dashboard.chartOf("dialogChart");
      dialogChart.destroy();
    }
  }
});
</script>