一、系统集成发布后的图表、Page的方法：
方法1：IFrame方式(公开发布)
<iframe id="demo_iframe" src="https://admin.sovitjs.com/publish_chart/2805023880597471236" scrolling="auto" width="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes">
</iframe> IFrame方式(签名认证发布)
<iframe id="demo_iframe" src="https://admin.sovitjs.com/publish_chart/2778425147218984965?appid=x&apikey=x&method=POST&code=x&signature=x
" scrolling="auto" width="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes">
</iframe> 后面的appid=x&apikey=x&method=POST&code=x&signature=x的使用方法请参考Sovit2D文档中心“签名认证方法”章节。
如果图表或者Page页面里面要接收参数，直接在iframe链接后面加参数即可：?param=? ¶m=?
方法2：Div集成方式
1. 引入SovitChart JS库文件（JS文件可以下载到本地引入）
<script src="https://admin.sovitjs.com/static/sovitjs/SovitChartPaser.min.js" type="text/javascript"></script><br> 2. 在页面中定义DIV容器
<div id="sovitjs_div_id" style="height:350px">
</div> 3. 在js代码块中加载图表文件或者page大屏文件
//SovitJS离线发布, publishType为2代表下载js及数据离线部署，此时图表只支持JSON数据源
//通过SovitChart快速制作图表，然后嵌入到网页中，具体请登录数维图后面操作 https://www.sovitjs.com
var sceneMain = new SovitChartPaser.SceneMain({
//apiurl: 'https://admin.sovitjs.com/restapi',//在线部署时必须指定图表后台地址，如果是私有部署版则指定的是自己部署sovit包的服务器访问地址如：http://192.168.0.10:9188
publishType: 2 //1为在线部署 2为离线部署
})
//initChart方法用来加载图表或Page页面到Div中， pageId为图表或Page页面的ID，发布时可以看到
sceneMain.initChart("sovitjs_div_id", { pageId: "2898072415563153411" });
4. 如果是签名认证发布的Page如何接入？
sceneMain.initChart("chart_div_id", {
pageId: "2778425147218984965",//pageID
appid: appObject.appid,
apikey: appObject.apikey,
method: appObject.method,
code: appObject.code,
signature: appObject.signature,
params:{
num:10
}
}); 需要在初始化Page时将签名认证用的5个参数传进去。
注意下面的params是用来向Page传参数，如果要传多个参数直接在params里面添加多个即可。
二、向图表方法中传JSON数据的接口：
1. IFrame引用的页面
var iframeWin = this.$refs.demoIframe.contentWindow;
iframeWin.postMessage({
cmd: 'JsonSend',
params: {
success: true,
data: reData//json数据
}
}, '*') 2. DIV集成的页面
sceneMain.sendJson("sovitjs_div_id","Json28980712857350963290001",json1);//第二个参数代表在制作的图表page绑定数据时定义的JSON数据源的编号 三、向地图添加标注：
let markJson = [{
"code": "1001",
"name": "标注1",
"value": [119.04, 35.9423]
},
{
"code": "1002",
"name": "标注2",
"value": [120.6774, 35.9263]
}
];
sceneMain.putMapMark("chart_div_id", markJson); 四、改变地图的显示省份(省份编码请参考地图消息份编码章节)：
sceneMain.changeMap("chart_div_id", "110000");//110000 北京代码 四、图表添加事件回调监听：
//单图表事件回调，返回参数为两个，type:事件类型， reObj:对象内容 let mapMain = sceneMain.initChart("chart_div_id", {
pageId: "2805023880597471236",
},function(type,reObj){
console.log(type,reObj);
if(type == "click") {
alert("点击事件测试");
}
}); //Page页面事件回调，返回参数为三个，chartId:图表在page中的ID，type:事件类型， reObj:对象内容
let pageMain = sceneMain.initChart("page_div_id", {
pageId: "2805023880597471236",
},function(chartId, type,reObj){
console.log(chartId, type,reObj);
if(type == "click") {
alert("点击事件测试");
}
}); //当使用地图组件时，并且在地图组件中增加了下拉选择省份城市的组件，当通过下拉组件切换地图时可以回调，如下 sceneMain.initChart("chart_map_1", {
pageId: "2910880950147612673" //图表的ID，发布图表的地方可以找到
},function(type,reObj){
if(type == "click") {
console.log(type,reObj);
alert("点击事件测试");
}
},function(id,type,reObj){//这个回调函数则是用来回调地区下拉的
if(type == "change") {
console.log(id,type,reObj);
alert("选择地区下拉测试");
}
});<br> 五、获取图表或者Page页中对象：
//获取了图表或者page对象后可以let chartModel = sceneMain.initChart("chart_div_id", {
pageId: "2870241277264265223",
});
console.info(chartModel);//chartModel表示获取的图表对象或者Page中的对象，如果是Page页，chartModel返回的是一个json数组，里面包含了Page页中所有组件，key为组件的ID，组件ID在Page设计器中能看到<br><br> 六、如何将自定义的组件放到引入的Page的某个指定位置：
1. 先在设计Page时在某个位置放置一个空的容器(DIV容器)
2. 在自己引入page的位置定义自己的组件，然后调用API接口将组件加载到page页面中
上面的DIV用来集成Page，下面的el-select是自己定义的自定义组件
this.sceneMain.putWidget("component_com_div_1_11", "select_test_id");//调用API将自定义组件加载到Page空的容器中，参数1代码容器的ID， 参数2是自定义的组件所在的位置 执行后的效果：
//自定义的组件事件触发刷新Page中某个组件，里面的id是定义表格数据查询时的参数，相当于触发表格数据重新查询doSelectTest() {
this.sceneMain.refreshDatas("chart_div_id", "Sql27578923282144952380003", {
id: this.selectTestValue
});
},<br><br> 
