javascript - Syncfusion Vuejs 数据透视表

Question

我正在尝试在我的项目中使用此 Syncfusion 数据透视表包。
Here is the link of package .

我刚刚复制了代码并将其粘贴到我的 vue 组件中。
我复制的代码:

<template>
  <div id="app">
    <ejs-pivotview :dataSourceSettings="dataSourceSettings" :height="height"></ejs-pivotview>
  </div>
</template>

<script>
  import Vue from "vue";
  import { PivotViewPlugin } from "@syncfusion/ej2-vue-pivotview";
  import { pivotData } from "./data.js";

  Vue.use(PivotViewPlugin);

  export default {
    data() {
      return {
        dataSourceSettings: {
          dataSource: pivotData,
          expandAll: false,
          columns: [
            { name: "Year", caption: "Production Year" },
            { name: "Quarter" }
          ],
          values: [
            { name: "Sold", caption: "Units Sold" },
            { name: "Amount", caption: "Sold Amount" }
          ],
          rows: [{ name: "Country" }, { name: "Products" }],
          filters: []
        },
        height: 350
      };
    }
  };
</script>

<style>
  @import "../../../../../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-lists/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-popups/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-popups/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-grids/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-pivotview/styles/material.css";
</style>

但它没有给出演示中所示的结果:
预期结果

给出结果:

data.js 中的我的数据透视数据。这是示例数据:

 {
            "balance": 2430.87,
            "quantity": 11,
            "name": "Skinner Ward",
            "gender": "male",
            "company": "GROK",
            "state": "New Jercy"
        },
        {
            "balance": 3192.7,
            "quantity": 15,
            "name": "Gwen Dixon",
            "gender": "female",
            "company": "ICOLOGY",
            "state": "Vetaikan"
        },
        {
            "balance": 1663.84,
            "quantity": 14,
            "name": "Deena Gillespie",
            "gender": "female",
            "company": "OVERPLEX",
            "state": "New Jercy"
        }

Answer 1

报表中提到的字段在绑定(bind)数据源中不可用。因此，该组件无法渲染。因此，请使用数据源中的可用字段。 同时，我们计划在所有UG示例中包含一个选项卡，以展示报告中绑定(bind)的数据源。月底会刷新。

同时，我们还准备了样本数据供您引用。

示例链接:https://codesandbox.io/s/vue-template-d9z5o 在线演示链接:https://ej2.syncfusion.com/vue/demos/#/material/pivot-table/default.html