DataGear 数据可视化看板整合前端框架Vue-CSDN博客

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

DataGear 2.4.0 版本的看板JS对象新增了loadUnsolvedCharts()函数，用于异步加载页面端动态生成的图表元素，利用它，可以很方便整合Angular、React、Vue等前端框架。本文以Vue为例，详细介绍如何进行整合。

注意：
此篇文章已过时，请参考最新版文章：
DataGear 制作基于Vue前端框架渲染的数据可视化看板

首先，点击看板管理页面的【添加】按钮，新建一个看板，HTML模板内容如下：

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>

</body>
</html>

保存后，点击看板添加页面右侧的上传资源图标按钮，上传Vue库看板资源（管理员可上传看板全局资源，看板中可直接引入），上传后看板资源列表为：

index.html
vue-2.6.12.js

然后，在看板HTML模板中引入Vue库：

<!DOCTYPE html>
<html>
<head>
...
<script src="vue-2.6.12.js"></script>
</head>
<body>

</body>
</html>

最后，编写Vue组件，并在Vue渲染完成后，调用loadUnsolvedCharts()函数异步加载图表：

<!DOCTYPE html>
<html>
<head>
...
<script src="vue-2.6.12.js"></script>
</head>
<body>
<div id="app">
  <div v-for="chartId in chartIds" v-bind:dg-chart-widget="chartId" class="dg-chart"></div>
</div>
</body>
</html>
<script>
var app = new Vue({
  el: '#app',
  data: {
    chartIds: ['图表部件ID-0', '图表部件ID-1', '图表部件ID-2']
  },
  mounted: function()
  {
      dashboard.loadUnsolvedCharts();
  }
});
</script>