WebDataRocks适配Vue 3 + TS

背景：

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

WebDataRocks版本：1.4.7+

Vue版本（使用组合式API）：3.2+

适配方案：

方案1：

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

引入组件

ts 复制代码

import Pivot from "./components/Pivot";
import "webdatarocks/webdatarocks.css";

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