WebDataRocks适配Vue 3 + TS

背景:

笔者公司需要对多层级数据进行分析、计算和可视化操作,普通的table表格不满足需要,WebDataRocks刚好满足需求。

WebDataRocks版本:1.4.7+

Vue版本(使用组合式API):3.2+

适配方案:

方案1:

按照官方指导,有封装好的pivot组件,可以直接使用。但是官方给的例子比较简单,基本步骤如下:

  1. 引入组件
ts 复制代码
import Pivot from "./components/Pivot";
import "webdatarocks/webdatarocks.css"; 
  1. 在template中使用组件,数据以url的形式传入组件
ts 复制代码
<template>
 <Pivot
    toolbar
    report="https://cdn.webdatarocks.com/reports/report.json"
  /> 
</template>

到这里基本完成了所有示例操作。但是实际项目中,并不是这种情况。

大部分的需求是:进入页面,网络请求数据,然后将数据显示在WebDataRocks,并完成各种分析、计算功能。改变查询条件,再次网络请求数据,然后WebDataRocks重新进行一轮操作。

官方封装的Pivot组件有很多props可以设置,但是笔者没有看到"设置数据"、"刷新数据"的prop。要想对WebDataRocks重新设置数据,只能修改官方的Pivot组件。
修改Pivot组件

ts 复制代码
//定义一个响应式对象
const webdatarocks = ref<WebDataRocks.Pivot>();
//将webdatarocks暴露出去,可以让父组件使用
defineExpose({
  webdatarocks
});
onMounted(() => {
  //接收new WebDataRocks()返回的对象
  webdatarocks.value = new WebDataRocks({
    ...props,
    container: pivot.value,
    global: {
      // Replace this file with own localization file
      localization: "https://cdn.webdatarocks.com/loc/zh.json"
    }
  });
});

然后修改Pivot的父组件:

ts 复制代码
//定义pivot对象绑定dom中的Pivot
const pivot = ref();
//定义一个pivotReport对象
const pivotReport = reactive({
  dataSource: {
    data: []
  }
});
//获取数据的方法
function getData() {
    getDataApi().then(res => {
        //获取数据后,将数据赋值给webdatarocks
        //pivotReport虽然是响应式的,修改data并不会自动更新图表
        pivotReport.dataSource.data = res;
        pivot.value.webdatarocks.setReport(pivotReport);
        pivot.value.webdatarocks.refresh();
    });
}
<template> 
    <Pivot ref="pivot" toolbar :report="pivotReport" /> 
</template>

调用方法比较简单,但是官方没有说明文档,自己摸索很耗时间。官方还有很多、很强大的api,具体按需要接入,可以参考官方文档,基本都是在pivotReport对象内设置。

方案2:

由于笔者现在的业务是结合el-tabs使用WebDataRocks,多次频繁切换el-tabs时,WebDataRocks设置的measures有些列计算的数据不正确(非必现,大部分情况计算正确)。

笔者排查了很久,也没发现问题(控制台不报错),不知道如何修改这样的非必现问题。

现在换了第二种方案,不使用官方的Pivot组件,在业务组件中直接使用WebDataRocks。在需要刷新数据的时候,重新new WebDataRocks()对象,再进行操作。

ts 复制代码
import WebDataRocks from "webdatarocks";
import "webdatarocks/webdatarocks.min.css";
//定义pivotTable对象绑定dom中的WebDataRocks表格
const pivotTable = ref();
//定义Webdatarocks.Pivot对象
const webdatarocksPivot = ref();
//定义一个pivotReport对象
const pivotReport = reactive({
  dataSource: {
    data: []
  }
});
//获取数据的方法
function getData() {
    getDataApi().then(res => {
        //获取数据后,将数据赋值给webdatarocks
        //pivotReport虽然是响应式的,修改data并不会自动更新图表
        pivotReport.dataSource.data = res;
        //每次赋值前都重新初始化WebDataRocks对象
        webdatarocksPivot.value = initWebDataRocks();
        webdatarocksPivot.value.setReport(pivotReport);
        webdatarocksPivot.value.refresh();
    });
}
//初始化WebDataRocks对象
function initWebDataRocks() {
  return new WebDataRocks({
    height: 600,
    toolbar: true,
    container: pivotTable.value
  });
}
<template> 
    <div ref="pivotTable" />
</template>

最后:

到这里主要的使用方案就写完了。官方没有具体的Vue 3使用文档,查了百度和Google,也没发现有参考价值的文档,在此记录下,方便其他同学查阅。

相关推荐
sunshine64116 分钟前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻39 分钟前
Vue(四)
前端·javascript·vue.js
蜜獾云42 分钟前
npm淘宝镜像
前端·npm·node.js
dz88i842 分钟前
修改npm镜像源
前端·npm·node.js
Jiaberrr1 小时前
解锁 GitBook 的奥秘:从入门到精通之旅
前端·gitbook
顾平安2 小时前
Promise/A+ 规范 - 中文版本
前端
聚名网2 小时前
域名和服务器是什么?域名和服务器是什么关系?
服务器·前端
桃园码工2 小时前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]
前端·html·gin·模板渲染
不是鱼2 小时前
构建React基础及理解与Vue的区别
前端·vue.js·react.js
沈剑心2 小时前
如何在鸿蒙系统上实现「沉浸式」页面?
前端·harmonyos