关于在echarts中使用geo.json渲染地图的方法

编程小号 • 2023-12-08 08:06 • 未分类

1。下载地图，里面提供了各个地区的jeo.json数据，链接：datav.aliyun.com/tools/atlas…

根据项目需求下载指定的文件。 2.引用echarts.根据官网示例引用，并引用你下载的deo.json文件，完整代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="echarts.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="jq.js" type="text/javascript" charset="utf-8"></script>
	<title></title>
</head>
<body>
<div id="main" style="width: 400px;height:900px;"></div>
<div id="mains" style="width: 400px;height:900px;"></div>
	<script type="text/javascript"> var dom = document.getElementById("main"); //得到echarts的实例对象 var mapChart= echarts.init(dom); $.getJSON("geo.json", function(geoJson) {//#1 echarts.registerMap('济南', geoJson);//#2 let option = { series: [ { name: '济南地图', type: 'map', mapType: '济南',//#3 itemStyle:{ normal:{label:{show:true}, areaStyle: { color: '#CCFFFF', }, }, emphasis:{label:{show:true}, areaStyle: { color: '#CCFFFF', }, },}, data:[{name: '历下区', value: 100,selected:true}],//地图数据。name对应geo.json中的name, nameMap: {'历下区': '历下区'}//更改地图中的name 名称 } ] } mapChart.setOption(option); }) // echarts图点击事件 mapChart.on('click', function (params) { // 控制台打印数据的名称 console.log(params.name) }); </script>
</body>
</html>