JS页面引用功能
js页面引用属于商业版功能，它可将统计项（包括统计项中的所有运算函数图表中的一个或多个图表）和视图（包括视图中所有元素中的一个或多个图表）以引入js文件的形式嵌入到其他外部系统中。
要使用js页面引用，需要首先执行以下操作：
- 创建相应调用方
- 调用方已申请相关元素的授权信息（如果申请统计项授权，则只能嵌入该统计项的图表。如果申请工程授权，则可以嵌入该统计工程下所有图表。如果需要嵌入视图，则需要申请视图和视图内所包含统计项的授权） 授权申请在管理员审批后，与三分钟左右生效。
执行完以上操作后，即可嵌入图表到外部系统中，您可以在普通html、jquery项目、React项目、Vue项目等项目中使用该功能。
在项目中引用下面的文件，并调用渲染函数即可！
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容器中可以嵌入统计项中的一个或多个图表 -->
<div id="your-page-container1"></div>
<div id="your-page-container2"></div>
<!-- 引入资源文件 -->
<script src="http://10.206.6.31:8181/open/lighthouse-external-embed.js"></script>
<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>
图表渲染函数为：
LightHouse.renderStat('your-page-container1','caller:test_caller','wTSdRfENOXdzpeXaqQOOX4Ol34p1GX8Fh4oe8Rfq',1100619,[0,1,2,3],extendConfig);
参数：
- div，渲染容器
- callerName,调用方名称
- callerKey，调用方秘钥
- statId,要嵌入的统计项ID
indicatorIndexes,要嵌入的图表index，xl-lighthouse中每个统计项都一个包括一个或多个统计运算函数，使用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图表；
extendConfig，渲染设置参数 其中theme:表示主题，可选择包括light或dark lang:表示语言，可选包括zh-CN或en-US indicator-#参数用于给每个图标指定是否显示title和指定显示的title名称。
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>
视图嵌入
视图嵌入函数定义：
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的显示名称；
其他逻辑与统计项一致。