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="https://admin.sovitjs.com/static/sovitjs/Sovit2DPaser.min.js"></script>
		<!--导入SovitChart核心js库,2D场景中集成了chart则需要同时引入chart的js库-->
		<script src="https://admin.sovitjs.com/static/sovitjs/SovitChartPaser.min.js"></script>
	</head>

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

</html>
<script>
	let sceneMain = null;
	let sceneChartMain = null;
	$(document).ready(function() {
		sceneMain = new Sovit2DPaser.Scene2dMain({
			apiurl: 'https://admin.sovitjs.com/restapi',
			publishType: 1 //1为在线引用组件   2为离开引用组件
		});
		//初始化图表参数,如果场景中没有加入图表,则不用创建
		sceneChartMain = new SovitChartPaser.SceneMain({
			apiurl: 'https://admin.sovitjs.com/restapi',
			publishType: 1 //1为在线引用组件   2为离开引用组件
		});
		sceneMain.init2d("sovit2d_1", {
			pageId: "2945700478480023561", //图表的ID,发布图表的地方可以找到2607404157748903944
			params:{//params是向后端接口或者SQL中定义了参数,进行参数传递,注意key的名称要和编辑器中对接数据时定义的参数名一样
				"key1":1,
				"key2":2,
				"key3":"value"
			}
		},function(reData) {
			console.info(reData)
			$("#reback_event").html(JSON.stringify(reData));
			window.layer.getElementById('TEXT_RECTMODEL_26').hide();
		});
		sceneChartMain.initChart("sovit2d_1", {
			appType: 'sovit2d',//注意,当Sovit2D中使用了chart,这里使用SovitChart的API时必须加上这个参数
			pageId: "2945700478480023561", //图表的ID,发布图表的地方可以找到2607404157748903944
		},function(comId,eventType,reData) {
			console.info(comId,eventType,reData)
			window.layer.getElementById('TEXT_RECTMODEL_26').show();
			$("#reback_event").html("组件ID:"+comId+";事件类型"+eventType+";返回数据"+JSON.stringify(reData));
		});
		console.info(sceneMain)
		sendJson("sovit2d_1");
		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);
		let random2 = (Math.random() + 0.5).toFixed(2);
		let random3 = (Math.random() + 0.5).toFixed(2);
		let random4 = (Math.random() + 0.5).toFixed(2);
		let random5 = (Math.random() + 0.5).toFixed(2);
		let random6 = (Math.random() + 0.5).toFixed(2);
		//说明:json的格式与编辑器中绑定数据时的JSON格式一致
		let testJsons = [{
				"legend": "当月累计发电量",
				"datas": [{
					"name": "电站1",
					"value": (100 * random).toFixed(2)
				}, {
					"name": "电站2",
					"value": (100 * random1).toFixed(2)
				}, {
					"name": "电站3",
					"value": (100 * random2).toFixed(2)
				}, {
					"name": "电站4",
					"value": (100 * random3).toFixed(2)
				}, {
					"name": "电站5",
					"value": (100 * random4).toFixed(2)
				}, {
					"name": "电站6",
					"value": (100 * random5).toFixed(2)
				}, {
					"name": "电站7",
					"value": (100 * random6).toFixed(2)
				}]
			},
			{
				"legend": "上月同期发电量",
				"datas": [{
					"name": "电站1",
					"value": (120 * random).toFixed(2)
				}, {
					"name": "电站2",
					"value": (140 * random1).toFixed(2)
				}, {
					"name": "电站3",
					"value": (160 * random2).toFixed(2)
				}, {
					"name": "电站4",
					"value": (150 * random3).toFixed(2)
				}, {
					"name": "电站5",
					"value": (140 * random4).toFixed(2)
				}, {
					"name": "电站6",
					"value": (130 * random5).toFixed(2)
				}, {
					"name": "电站7",
					"value": (120 * random6).toFixed(2)
				}]
			}
		];
		sceneMain.sendJson(divId, "Json11750001", testJsons);
		sceneChartMain.sendJson(divId, "Json11750001", testJsons);
	}
</script>
效果预览:
本例子用来展示了Sovit2D+SovitChart合并的场景,目前版本Sovit2D中可以直接集成chart图表。
对于Sovit2D场景中添加了Chart的场景在集成(DIV方式集成)的时候需要在js中同时调用2D解析器API和Chart解析器API 需要在模型发布时下载JS库文件和模型数据文件(svt格式)

回调事件测试:

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

免费开发我的场景