SovitChart示例

Sovit2D示例

Sovit3D示例


<!DOCTYPE html>
<html lang="en">
	<head>
		<title id="page_title"></title>
		<meta name="referrer" content="strict-origin-when-cross-origin">
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
		<script src="https://admin.sovitjs.com/static/sovitjs/Sovit3DPaser.min.js"></script>
		<script src="https://admin.sovitjs.com/static/sovitjs/SovitChartPaser.min.js"></script>
	</head>
	<body style="background-color: #e5e7ea;">
		<div id="sovit3d_1" style="width:1160px;height: 578px;margin-top: 0px;position: relative;">
		</div>
	</body>

</html>
<script>
	let sceneMain = null;
	let sceneChartMain = null;
	$(document).ready(function() {
		sceneMain = new Sovit3DPaser.SceneMain({
			apiurl: 'https://admin.sovitjs.com/restapi',
			publishType: 1 //1为在线引用组件   2为离开引用组件
		});
		//初始化图表参数,如果场景中没有加入图表,则不用创建
		sceneChartMain = new SovitChartPaser.SceneMain({
			apiurl: 'https://admin.sovitjs.com/restapi',
			publishType: 1 //1为在线引用组件   2为离开引用组件
		});
		
		initScene('3044205730723790849');
		
		//说明:component_com_text_1_5是chart场景中元素生成的DIV的ID,这个可以在场景编辑器中找到。
		//jCanvasQuery是数维图JS库中集成的jQuery组件,和上面使用的$是一个意思,如果没有引入jQuery组件可以直接用这个组件代替
		//绑定点击事件
		jCanvasQuery("#component_com_text_1_5").css('color','#ffffff').html("点击跳转到另一个场景");
		jCanvasQuery("#component_com_text_1_5").click(function(){
			initScene('3051295999663276034');
		});
	});

	function initScene(id) {
		//清除上一个场景的页面数据
		jCanvasQuery("#sovit3d_1").html('').height(578);
		//销毁上一个场景的3D对象数据
		sceneMain.destroyed();
		//销毁上一个场景的图表对象数据
		sceneChartMain.destroyed();
		sceneMain.init3d("sovit3d_1", {
			pageId: id, //图表的ID,发布图表的地方可以找到
			chartSceneMain: sceneChartMain,//图表解析器对象传入到3D解析器中
			params: { //params是向后端接口或者SQL中定义了参数,进行参数传递,注意key的名称要和编辑器中对接数据时定义的参数名一样

			}
		}, function(reData) {
			console.info(reData)
		});
		sceneChartMain.initChart("sovit3d_1", {
			appType: 'sovit3d', //注意,当Sovit2D中使用了chart,这里使用SovitChart的API时必须加上这个参数
			pageId: id, //图表的ID,发布图表的地方可以找到
		}, function(comId, eventType, reData) {
			console.info(comId, eventType, reData)
		});
	}
</script>
效果预览:
本例子用来展示了Sovit3D+SovitChart合并的场景通过js解析器集成到自已的系统界面中并且实现自定义开发:
这里展示如何对chart中的组件元素添加点击事件,并且实现点击后跳转到另一个场景。

通过数维图软件平台,实现零代码可视化开发!

免费开发我的场景