SovitChart示例

Sovit2D示例

Sovit3D示例


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

	<head>
		<script src="./res/static/chart/SovitChartPaser.min.js"></script>
	</head>

	<body>
		<div class="sovitjs_body">
			<div id="tree_div"></div>
			<div id="main_div">
				<div class="main_bg">
					<!-- demo_div此div里面是demo程序展示的容器 -->
					<div class="demo_div">
						<div id="chart_map_1" style="width: 100%;height: 100%;">

						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>
<script>
	let sceneMain = null;
	//说明:jCanvasQuery是SovitChart核心库提供的JQuery组件,类似$(),你也可以使用自己引入的JQuery库
	jCanvasQuery(document).ready(function() {
		//创建SovitChart解析器对象
		sceneMain = new SovitChartPaser.SceneMain({
			//apiurl: 'https://admin.sovitjs.com/restapi',
			publishType: 2 //1为在线引用组件   2为离开引用组件
		});
		//引入图表并在指定的DIV里面显示,chartReObj为返回的图表对象
		let chartReObj = 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);
				if(reObj == '430000') {//当选择湖南省时,测试给湖南省发送JSON
					putJsonTest();
				}
			}
		});
		
		//通过返回的图表对象可以自定义图表中的属性(属性参考Echart官方文档)
		chartReObj.option.geo.label.normal.show=true;
		chartReObj.option.tooltip = {
	        trigger: 'item',
	        formatter: '{b}<br/>{c} (p / km2)'
	    }
		//设置完属性后需要调用setOption才会生效
		chartReObj.chartObj.setOption(chartReObj.option, true);
		console.info(chartReObj);
		
		let markJson = [{
			"code": "1001",
			"name": "标注1",
			"value": [102.9199,25.4663]
		},
		{
			"code": "1002",
			"name": "标注2",
			"value": [112.9175,24.3292]
		}];
		//给地图添加标注,也可以在编辑器的属性设置中实现
		sceneMain.putMapMark("chart_map_1", markJson);
		
		//此API接口是通过代码切换地区,可以自己写下拉框调用进行地区切换
		//sceneMain.changeMap("chart_map_1", "110000");//110000  北京代码
	});
	function putJsonTest() {
		let json1 = [{
			"mapValue":"430100:600"
		},{
			"mapValue":"430200:500"
		},{
			"mapValue":"430400:300"
		}]
		//给组件发送JSON数据
		sceneMain.sendJson("chart_map_1","Json28980712857350963290004",json1);//第二个参数代表在制作的图表page绑定数据时定义的JSON数据源的编号
	}
</script>
效果预览:
SovitChart后台编辑器创建地图组件,样式效果通过编辑器中的属性配置进行设置。
案例代码中演示了如果通过编码自定义地图属性,如何进行事件回调,如何添加标注等。

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

免费开发我的场景