SovitChart示例

Sovit2D示例

Sovit3D示例


<!DOCTYPE html>
<html lang="en">

	<head>
		<title id="page_title">Sovit2D集成示例(DIV离线嵌入场景)</title>
		<meta charset="UTF-8">
		<meta name="referrer" content="no-referrer" />
		<script src="./res/static/js/jquery-1.10.2.min.js"></script>
		<!--导入Sovit2D核心js库,官网后台发布场景的位置可以下载-->
		<script src="./res/static/sovit2d/Sovit2DPaser.min.js"></script>
	</head>

	<body style="background-color: #e5e7ea;">
		<div id="head_div_2"></div>
		<div class="main-case" style="min-height: 500px;padding-top: 30px;">
			<div class="sovitjs_body">
				<div id="sovit2d_1" style="width:100%;height: 768px;margin-top: 20px;position: relative;">
					<!--用来嵌入2D场景的DIV容器-->
				</div>
			</div>
		</div>
	</body>

</html>
<script>
	let sceneMain = null;
	$(document).ready(function() {
		sceneMain = new Sovit2DPaser.Scene2dMain({
			//dataFilePath: '/res/static/sovit2d/',//静态文件所在路径(相对路径),当使用import方式 引入js时要设置
			publishType: 2 //1为在线引用组件   2为离开引用组件
		});
		//参数1为要嵌入场景的div的ID,参数2为json集,离线发布时只需要设置场景的id(pageId)
		sceneMain.init2d("sovit2d_1", {
			pageId: "2960770410427187203", //场景的ID,发布图表的地方可以找到
		},function(reData) {//事件回调函数
			console.info(reData)
		});
		
		setInterval(function() {
			//这里为模拟实时向场景发送动态数据,实际当中,数据需要从后端获取
			sendJson("sovit2d_1");
		}, 2000)
	});
	
	function sendJson(divId) {
		let random = (Math.random() + 0.5).toFixed(2);
		let random1 = (Math.random() + 0.5).toFixed(2);
		//说明:json的格式与编辑器中绑定数据时的JSON格式一致
		let testJson = {
			"A0":(8 * random).toFixed(2),
			"A1":(7 * random1).toFixed(2),
		};
		//参数一为div的id,参数二为JSON数据源的id,参数三为JSON数据
		sceneMain.sendJson(divId, "Json10110001", testJson);
	}
</script>
效果预览:
通过Sovit2D后台编辑器制作好的模型。这里用来测试如何下载2D模型文件离线集成开发。
需要在模型发布时下载JS库文件和模型数据文件(svt格式)

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

免费开发我的场景