如何在Vue JS中嵌入Qlik Cloud透视表并自定义qHyperCubeDef、qDef

你可以通过给<qlik-embed>组件传递options属性，直接注入自定义的qHyperCubeDef和qDef配置，覆盖默认的可视化对象设置。以下是Vue单文件组件的实操示例：

<template>
  <div class="qlik-embeds">
    <!-- 定制化透视表 -->
    <qlik-embed
      type="visualization"
      app-id="your-app-id-here"
      object-id="your-base-pivot-id"
      :options="customPivotConfig"
    ></qlik-embed>

    <!-- 定制化筛选器 -->
    <qlik-embed
      type="visualization"
      app-id="your-app-id-here"
      object-id="your-base-filter-id"
      :options="customFilterConfig"
    ></qlik-embed>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 透视表的自定义HyperCube配置
const customPivotConfig = ref({
  qHyperCubeDef: {
    // 定义维度
    qDimensions: [
      {
        qDef: {
          qFieldDefs: ['ProductCategory'], // 数据源字段名
          qFieldLabels: ['产品类别'], // 前端显示标签
          qSortCriterias: [{ qSortByAscii: 1 }] // 按ASCII升序排序
        },
        qShowAlternatives: false // 不显示备选值
      },
      {
        qDef: {
          qFieldDefs: ['Region'],
          qFieldLabels: ['销售区域']
        }
      }
    ],
    // 定义度量
    qMeasures: [
      {
        qDef: {
          qDef: 'Sum(SalesAmount)', // 度量表达式
          qLabel: '总销售额', // 显示标签
          qNumFormat: {
            qType: 'F', // 数值类型：浮点
            qnDec: 2, // 保留两位小数
            qUseThou: 1 // 启用千分位分隔
          }
        },
        qSortBy: { qSortByNumeric: -1 } // 按数值降序排序
      }
    ],
    qInitialDataFetch: [{ qWidth: 3, qHeight: 100 }], // 初始加载3列（2维度+1度量）、100行数据
    qInterColumnSortOrder: [0, 1, 2], // 列显示顺序：维度1→维度2→度量1
    qSuppressZero: true, // 隐藏零值行
    qSuppressMissing: true // 隐藏缺失值行
  }
})

// 筛选器的自定义HyperCube配置（以年份筛选为例）
const customFilterConfig = ref({
  qHyperCubeDef: {
    qDimensions: [
      {
        qDef: {
          qFieldDefs: ['Year'],
          qFieldLabels: ['销售年份'],
          qSortCriterias: [{ qSortByNumeric: -1 }] // 按年份降序
        },
        qNullSuppression: true // 隐藏空值选项
      }
    ],
    qInitialDataFetch: [{ qWidth: 1, qHeight: 10 }],
    qSuppressZero: false,
    qSuppressMissing: false
  }
})
</script>

关键说明 #

• options属性是核心：通过它传入的qHyperCubeDef会直接覆盖嵌入对象的默认Cube配置，不需要在Qlik Cloud中重新创建可视化对象
• 维度与度量的qDef参数：可以配置字段映射、显示标签、排序规则、数值格式等，完全匹配Qlik Engine API的定义
• 初始数据加载：qInitialDataFetch的qWidth必须和维度+度量的总数一致，否则会出现数据加载异常
• 组件注册前提：确保你已经在Vue项目中安装了@qlik/embed-web-components，并通过customElements.define注册了<qlik-embed>组件

调试技巧 #

• 先从最简配置入手：比如只定义一个维度和一个度量，确认配置生效后再逐步添加排序、格式等复杂规则
• 利用Qlik Engine API文档：所有qDef、qHyperCubeDef的参数都可以参考Engine API中NxDimension、NxMeasure、HyperCubeDef的官方定义来扩展

内容的提问来源于stack exchange，提问作者Joshua