DataGear 制作基于Vue前端框架渲染的数据可视化看板

DataGear

已于 2023-03-02 15:24:47 修改

阅读量1.9k

点赞数 1

分类专栏：数据可视化 BI 文章标签：数据可视化数据分析 echarts vue elementui

于 2023-03-02 15:22:51 首次发布

本文链接：https://blog.csdn.net/datagear/article/details/129301662

版权

数据可视化同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

22 篇文章 0 订阅

订阅专栏

DataGear 在4.3.0版本新增了dg-dashboard-code特性，并在4.4.0版本进行了改进和增强，结合看板API，可以很方便地制作完全由Vue、React等前端框架渲染的数据可视化看板。

本文基于Vue2、Element UI前端框架的<el-container>、<el-header>、<el-aside>、<el-main>、<el-row>等布局组件定义整个看板页面，并异步加载由Vue的v-for语法构建的图表元素。

首先，新建空白看板，填写名称后，先保存。

在编写看板页面之前，需要先下载 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 dg-dashboard-code="instance" dg-loadable-chart-widgets="异步加载图表部件ID-1,异步加载图表部件ID-2">
<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>
</head>
<body dg-chart-auto-resize="true" style="margin:0;">
<div id="app">
  <el-container style="height:100vh">
    <el-header style="text-align:center;font-weight:bold;font-size:2rem;">DataGear看板示例</el-header>
    <el-main>
      <el-container style="height:100%;">
        <el-aside>
          <div id="v-for-charts">
            <div v-for="chartId in loadChartIds" v-bind:dg-chart-widget="chartId" style="height:40vh;"></div>
          </div>
        </el-aside>
        <el-main>
          <el-row :gutter="20" style="height:100%;">
            <el-col :span="12" style="height:100%;">
              <div style="height:100%;" dg-chart-widget="图表部件ID-1"></div>
            </el-col>
            <el-col :span="12" style="height:100%;">
              <div style="height:100%;" dg-chart-widget="图表部件ID-2"></div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</div>
</body>
</html>
<script>
new Vue(
{
  el: '#app',
  data()
  {
    let d =
    {
      loadChartIds: ["异步加载图表部件ID-1", "异步加载图表部件ID-2"]
    };
    return d;
  },
  mounted()
  {
    dashboard.render();
    dashboard.loadUnsolvedCharts("#v-for-charts");
  }
});
</script>

保存，看板制作完成！

上述看板代码中：

dg-dashboard-code="instance"
设置看板页面加载后，仅创建看板JS对象，不执行初始化和渲染，因为在Vue挂载完成之前页面真正的DOM元素是不可用的。

dg-loadable-chart-widgets='...'
设置dashboard.loadUnsolvedCharts()函数允许异步加载的图表，避免越权访问。

dashboard.render();
在Vue挂载完成后执行看板渲染，因为此时才可以访问页面真正的DOM元素。

dashboard.loadUnsolvedCharts("#v-for-charts");
#v-for-charts元素里面通过v-for创建的图表元素需采用异步加载方式渲染，因为后台解析看板模板时无法识别它们。

示例效果图如下所示：

在这里插入图片描述

官网地址：

http://www.datagear.tech

源码地址：

Gitee：https://gitee.com/datagear/datagear

Github：https://github.com/datageartech/datagear

DataGear

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
DataGear 制作基于Vue前端框架渲染的数据可视化看板

DataGear在4.3.0版本新增了dg-dashboard-code特性，并在4.4.0版本进行了改进和增强，结合看板API，可以很方便地制作完全由Vue、React等前端框架渲染的数据可视化看板。本文基于Vue2、Element UI前端框架的、、、、等布局组件定义整个看板页面，并异步加载由Vue的v-for语法构建的图表元素
复制链接

扫一扫