XL-LightHouse
新一代实时业务监控系统

图表引用

作者：admin
最后编辑：2025-04-21 10:15:25

功能介绍

图表引用是指将统计项视图页面的图表和数据视图页面的图表以引入js文件的形式嵌入到其他外部系统中。js程序可在外部系统中自动渲染出筛选组件、筛选按钮和图表组件等部分，通过该功能可以方便的实现在自己的业务系统中查看数据。

系统支持在普通html项目、JQuery项目、React项目、Vue项目中使用该功能。

准备工作

使用本功能，请首先执行以下操作：

  • 创建调用方；
  • 调用方已申请相关元素的授权信息（如果申请统计项授权，则只能嵌入该统计项的图表，如果申请工程授权，则可以嵌入该统计工程下所有图表，如果需要嵌入视图，则需要申请视图和视图内所包含统计项的授权）；
  • 待授权申请被审核通过后，在自己的业务系统中引用如下js文件；
# 请将ip地址替换为xl-lighthouse项目部署的web服务IP地址；
http://10.206.6.31:8181/open/lighthouse-external-embed.js
http://10.206.6.31:8181/open/lighthouse-external-embed.css

统计项图表嵌入

Html项目嵌入示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Embed LightHouse Component</title>
</head>
<body>
  <!-- 图表嵌入容器，一个页面中可以包含多个嵌入div容器 -->  
  <div id="your-page-container1"></div>
  <div id="your-page-container2"></div>
  <!-- 引入js资源文件 -->
  <script src="http://10.206.6.31:8181/open/lighthouse-external-embed.js"></script>
  <!-- 引入css资源文件 -->
  <link rel="stylesheet" href="http://10.206.6.31:8181/open/lighthouse-external-embed.css" />
  <script>
    <!-- 渲染参数设置，非必要参数，可以根据需要选择设置 -->
    const extendConfig = {
        'theme':'light',
        'lang':'zh-CN',
        'indicator-0':{
            'title':{
                show:true,
                specify:'测试图表1',
            }
        },
        'indicator-1':{
            'title':{
                show:true,
                specify:'测试图表2',
            }
        },
        'indicator-2':{
            'title':{
                show:true,
                specify:'测试图表3',
            }
        },
        'indicator-3':{
            'title':{
                show:true,
                specify:'测试图表4',
            }
        }
    }
    <!-- 调用渲染函数 -->
    LightHouse.renderStat('your-page-container1','caller:test_caller','wTSdRfENOXdzpeXaqQOOX4Ol34p1GX8Fh4oe8Rfq',1100619,[0,1,2,3],extendConfig);
    LightHouse.renderStat('your-page-container2','caller:test_caller','wTSdRfENOXdzpeXaqQOOX4Ol34p1GX8Fh4oe8Rfq',1100619,[0,1,2],extendConfig);
  </script>
</body>
</html>

React项目嵌入示例

import React, { useEffect } from 'react';

declare global {
    interface Window {
        LightHouse: any;
    }
}

function MyComponent({ containerId, extendConfig }) {

    useEffect(() => {
        const script = document.createElement('script');
        script.src = 'http://10.206.6.31:8181/open/lighthouse-external-embed.js';
        script.async = true;

        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'http://10.206.6.31:8181/open/lighthouse-external-embed.css';
        document.head.appendChild(link);

        document.body.appendChild(script);

        script.onload = () => {
            if (typeof window.LightHouse !== 'undefined' && window.LightHouse.renderStat) {
                window.LightHouse.renderStat(
                    containerId,
                    'caller:lighthouse_test_call',
                    'aod36BtsDqLIevpCTIpPgP4MZLkujBpDUPLy9oGd',
                    1100619,
                    [0]
                );
            } else {
                console.warn('LightHouse is not available.');
            }
        };
        return () => {
            document.body.removeChild(script);
            document.head.removeChild(link);
        };
    }, [containerId]);

    return <div id={containerId}></div>;
};

export default MyComponent;

Vue项目嵌入示例

 <template>
  <div>
    <div id="your-page-container"></div> 
  </div>
</template>

<script>
export default {
  name: "ExternalJsComponent",
  mounted() {
    this.loadExternalStylesheet("http://10.206.6.31:8181/open/lighthouse-external-embed.css");
    this.loadExternalScript("http://10.206.6.31:8181/open/lighthouse-external-embed.js", () => {
      this.renderExternalComponent();
    });
  },
  methods: {
    loadExternalStylesheet(href) {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = href;
      document.head.appendChild(link);
    },
    loadExternalScript(src, callback) {
      const script = document.createElement("script");
      script.src = src;
      script.onload = callback;
      script.onerror = () => {
        console.error(`Script load error for ${src}`);
      };
      document.body.appendChild(script);
    },
    renderExternalComponent() {
      const extendConfig = {
        theme: 'light',
        lang: 'en-US',
      };

      if (typeof LightHouse !== 'undefined' && LightHouse.renderStat) {
        LightHouse.renderStat(
          'your-page-container',
          'caller:lighthouse_test_call',
          'aod36BtsDqLIevpCTIpPgP4MZLkujBpDUPLy9oGd',
          1100619,
          [0]
        );
      } else {
        console.error('LightHouse is not defined.');
      }
    },
  },
};
</script>

<style scoped>
/* Vue 组件的样式 */
</style>

调用渲染函数说明

1、调用示例

LightHouse.renderStat('your-page-container1','caller:test_caller','wTSdRfENOXdzpeXaqQOOX4Ol34p1GX8Fh4oe8Rfq',1100619,[0,1,2,3],extendConfig);

2、传递参数

  • div渲染容器；
  • 调用方名称；
  • 调用方秘钥；
  • 要嵌入的统计项ID；
  • 要嵌入的指标序号集合；
  • 渲染显示设置参数；

3、指标序号集合

在系统中每个统计项都包括一个或多个统计运算函数，使用Index标识每个函数，按照：整体指标、每个统计运算函数指标、limit指标依次排序。

比如，在下面的点击率计算统计项中，包含两个统计运算函数。

<stat-item title="每小时_各省份_点击率top50" stat="count(behavior_type == '点击')/count(behavior_type == '曝光')" dimens="province" limit="top50"/>

其中：

  • 0：表示点击率图表（整体指标）；
  • 1：表示点击量图表（第一个运算函数对应的图表）；
  • 2：表示总用户行为曝光量图表（第二个运算函数对应的图表）；
  • 3：表示limit图表；

所以：

  • 如果指定 [0,1,2,3] 则表示将所有图表都嵌入到div容器中；
  • 如果指定 [0] 则表示只嵌入点击率图表；
  • 如果指定 [2,3]则表示嵌入曝光量图表和limit图表；
  • 如果指定 [3]则表示只嵌入limit图表；

4、扩展渲染参数（非必要参数，如不指定，按默认显示）

const extendConfig = {
        'theme':'light',
        'lang':'zh-CN',
        'indicator-0':{
            'title':{
                show:true,
                specify:'测试图表1',
            }
        },
        'indicator-1':{
            'title':{
                show:true,
                specify:'测试图表2',
            }
        },
        'indicator-2':{
            'title':{
                show:true,
                specify:'测试图表3',
            }
        },
        'indicator-3':{
            'title':{
                show:true,
                specify:'测试图表4',
            }
        }
    }
  • theme:表示主题，可选择包括light或dark，默认为light；
  • lang:表示语言，可选包括zh-CN或en-US；
  • indicator-#参数：用于指定每个图表否显示title和指定自定义title名称；

视图嵌入

函数调用示例

LightHouse.renderView('your-page-container','caller:test_caller','wTSdRfENOXdzpeXaqQOOX4Ol34p1GX8Fh4oe8Rfq',1100042,['Widget-Cidkq'],extendConfig);
LightHouse.renderView('your-page-container2','caller:test_caller','wTSdRfENOXdzpeXaqQOOX4Ol34p1GX8Fh4oe8Rfq',1100042,['Widget-Cidkq'],extendConfig);

const extendViewConfig:ViewOpenExtendConfig = {
        'theme':'light',
        'lang':'zh-CN',
        'header':{
            'show':true,
            'specifyTitle':'测试看板'
        },
    }

传入参数说明

  • div，渲染容器
  • callerName,调用方名称
  • callerKey，调用方秘钥
  • viewId,要嵌入的视图ID
  • widgetKeys,要嵌入视图中的组件key,可以指定视图中的任意一个或多个组件，如果不指定则默认嵌入整个视图。
  • extendConfig,扩展参数。 theme：主题； lang:语言； header.show：是否显示Header； specifyTitle：指定header的显示名称；

其他逻辑与上文统计项一致。