持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

使用场景

将 DeepInsight 报表嵌入到你的分析应用，你将快速获得 DeepInsight 的精美报表和强大的分析能力。

但某些场合，报表级别的嵌入可能粒度过粗，你或许希望有图表级别的嵌入能力：

你希望控制部分图表的展示或隐藏；
你希望 DI 图表分散地嵌入系统；
你希望单独控制部分图表的筛选条件；
...

针对这些场景，我们提供了单图表的嵌入功能。

单图表嵌入带来更高灵活性的同时，会增加分析应用的开发成本，并丢失附属在报表上的分析能力，如关联筛选器、图表联动等功能。请综合权衡报表嵌入和图表嵌入的利弊。
如果你只有少量图表需要嵌入，亦可考虑制作多张报表，每个报表只有单个图表，采用嵌入报表的方案。

如何使用

制作一张报表

按正常流程做一张报表，但注意：

- 在单图嵌入时，我们是通过图表名字确定图表的，所以请保证图表名字在报表中唯一。
- 嵌入的是共享版的图表，所以更新报表后请同步至共享版。
- 目前仅支持嵌入 PC 版图表，所以请勿使用移动报表。

获取报表地址

点击「共享与发布」，点击「复制报表链接」：

将剪切板中的报表链接贴出来，可以看到内容如下：

https://deepinsight.alipay.com/pc.htm?reportId=D2018090600161401000000380995

其中基础URL是 https://deepinsight.alipay.com ，报表ID是 D2018090600161401000000380995 。

嵌入图表

通过报表名区分

在你的分析应用中，调用图表嵌入的 API :

// 单图表嵌入要求 @alipay/di-open-embed 版本 >= 0.0.13

import DI from '@alipay/di-open-embed';

const chart = DI.embed(document.getElementById('your_container_id'), {
    type: DI.type.CHART,
    url: 'https://deepinsight.alipay.com', // 基础URL地址，如需在开发、测试环境调试，需要设置成开发、测试环境对应的DeepInsight基础地址
    reportId: 'D2018090600161401000000380995', // 报表ID
    chartName: '核心指标趋势图', // 要嵌入的图表名字
    height: 800, // 数字或 css 长度单位
    width: 600, // 数字或 css 长度单位
});

通过报表ID 区分

如果图表名字确实有重复的也可以考虑采用图表ID的形式

获取ID

// 单图表嵌入要求 @alipay/di-open-embed 版本 >= 0.0.13

import DI from '@alipay/di-open-embed';

const chart = DI.embed(document.getElementById('your_container_id'), {
    type: DI.type.CHART,
    url: 'https://deepinsight.alipay.com', // 基础URL地址，如需在开发、测试环境调试，需要设置成开发、测试环境对应的DeepInsight基础地址
    reportId: 'D2018090600161401000000380995', // 报表ID
    chartId:'D2019070800161301000001664502', // 要嵌入的图表ID 上图红框内ID
    height: 800, // 数字或 css 长度单位
    width: 600, // 数字或 css 长度单位
});

如果你使用 React 和 antd ，那么可以使用下面这段代码嵌入报表：

import React, { PureComponent } from 'react';
// 显示loading转菊花效果的antd组件
import { Spin } from 'antd';
import DI from '@alipay/di-open-embed';

// DI图表组件，
export default class Chart extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    };
  }
  
  componentDidMount() {
    const chart = DI.embed(this.container, {
      type: DI.type.CHART,
      url: 'https://deepinsight.alipay.com', // 基础URL地址，如需在开发、测试环境调试，需要设置成开发、测试环境对应的DeepInsight基础地址
      reportId: 'D2018090600161401000000380995', // 报表ID
      chartName: '核心指标趋势图', // 要嵌入的图表名字
      height: 800, // 数字或 css 长度单位
      width: 600, // 数字或 css 长度单位
    });
    // 开始加载报表，开启转菊花效果
    this.setState({
      loading: true,
    });
    chart.on(DI.eventName.READY, () => {
      // 报表初始化完成，隐藏转菊花效果
      this.setState({
        loading: false,
      });
    });
    chart.on(DI.eventName.ERROR, error => {
      // 报表初始化失败，隐藏转菊花效果，并提示
      this.setState({
        loading: false,
      });
      window.alert('报表初始化失败: ' + error.type);
    });
  }

  render() {
    return (
      <div style={{ width: '100%', height: '100%' }}>
        <Spin spinning={this.state.loading} style={{ height: '100%' }}>
          <div style={{ height: '100%' }} ref={elem => { this.container = elem; }} />
        </Spin>
      </div>
    );
  }
}

通过拼接URL嵌入

若不使用 SDK ，也可采用拼接URL地址方式嵌入

https://deepinsight.alipay.com/pc.htm?reportId={reportId}&singleChartId={chartId}

或

https://deepinsight.alipay.com/pc.htm?reportId={reportId}&singleChartName={图表标题}

注意图表标题要 encodeURIComponent 。

问题排查

如果你的嵌入图表显示不正确，可以从这些方面排查问题：

确保你的报表已同步到共享版
检查报表是否为 PC 报表
检查 @alipay/di-open-embed 版本是否 >= 0.0.13
检查报表 ID 和图表名字是否正确
检查阅读者是否具有报表的阅读权限
检查阅读者是否能打开共享报表
在控制台打印错误信息

const chart = DI.embed(...);
chart.on(DI.eventName.ERROR, console.error);

高级能力

见「高级-控制筛选器」。

API 参考

完整的 API 文档见「API参考」。

基于DeepInsight嵌入单张报表