Echarts绘制单独省份地图并让某个市高亮显示(以江苏省为例)

前端 2019-11-16T10:32:40 浏览:141

1、测试环境要求

采用node模拟出服务器环境(当然 apache、nginx都可以)

2、技术点

HTML、JavaScript、Css、Echarts

3、效果实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Echarts绘制单独省份地图并让某个市高亮显示</title>
	<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script>
	<script src="echarts.min.js"></script>
	<style>
		#main{width: 800px;height: 800px;margin:0 auto;}
	</style>
</head>
<body>
	<p id="main"></p>
	<script>
	    $(function () {
	        $.get('jiangsu.json', function (geoJson) {
	        	//注册可用的地图,必须在包括 geo 组件或者 map 图表类型的时候才能使用。
	            echarts.registerMap('jiangsu', geoJson);
	            //初始化
	            var myChart = echarts.init(document.getElementById('main'));
	            myChart.setOption({
	            	// 一系列的配置参数
	                series: [{
	                    type: 'map',
	                    map: 'jiangsu',
                        label: {
                            normal: {
                                show: true,
                                color: '#acacac'
                            },
                            emphasis: {
                                show: true,
                                color: '#fff'
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#dfdfdf',
                                borderColor: '#ffffff',
                                borderWidth: 1.5
                            },
                            emphasis: {
                                areaColor: '#9ebd2a'
                            }
                        },
                        data:[
                            {name:'盐城市', selected:true}
                        ],
                        "left": 0,
                        "right": 0,
                        "top": 0,
                        "bottom": 0
	                }]
	            });
	            myChart.on('click', function(params){
                    console.log(params);//此处可以写一些某个市被点击后的操作
	            });
			});

	    })
	</script>
</body>
</html>

其中各个省份的地图json可以到官方git仓库寻找。