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,也没发现有参考价值的文档,在此记录下,方便其他同学查阅。

相关推荐
泉城老铁4 小时前
vue实现前端excel的导出
前端·vue.js
用户51681661458414 小时前
Lottie动画在前端web、vue、react中使用详解
前端·vue.js
咖啡の猫4 小时前
Vue收集表单数据
前端·javascript·vue.js
知识分享小能手4 小时前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
林恒smileZAZ4 小时前
CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
前端·计算机外设·css3
云中雾丽5 小时前
flutter中 NotificationListener 详细使用指南
前端
大杯咖啡5 小时前
一篇文章搞懂,浏览器强缓存以及协商缓存
前端·javascript
王六岁5 小时前
# 🐍 前端开发 0 基础学 Python 入门指南: Python 元组和映射类型深入指南
前端·javascript·python
_志哥_5 小时前
多行文本超出,中间显示省略号的终极方法(适配多语言)
前端·javascript·vue.js
王六岁5 小时前
# 🐍 前端开发 0 基础学 Python 入门指南:常用的数据类型和列表
前端·javascript·python