背景：

笔者公司需求对多层级数据进行剖析、核算和可视化操作，一般的table表格不满足需求，WebDataRocks刚好满足需求。
WebDataRocks版本：1.4.7+
Vue版本（运用组合式API）：3.2+

适配计划：

计划1：

按照官方指导，有封装好的pivot组件，能够直接运用。可是官方给的比如比较简单，根本过程如下：

  1. 引进组件
import Pivot from "./components/Pivot";
import "webdatarocks/webdatarocks.css";
  1. 在template中运用组件，数据以url的形式传入组件
<template>
 <Pivot
    toolbar
    report="https://cdn.webdatarocks.com/reports/report.json"
  /> 
</template>

到这里根本完成了所有示例操作。可是实践项目中，并不是这种状况。
大部分的需求是：进入页面，网络恳求数据，然后将数据显现在WebDataRocks，并完成各种剖析、核算功用。改变查询条件，再次网络恳求数据，然后WebDataRocks从头进行一轮操作。
官方封装的Pivot组件有很多props能够设置，可是笔者没有看到“设置数据”、“刷新数据”的prop。要想对WebDataRocks从头设置数据，只能修正官方的Pivot组件。
修正Pivot组件

//界说一个呼应式目标
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的父组件：

//界说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()目标，再进行操作。

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