百度Echarts毕节市金沙县区域地图-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
    
    <script src="/js/echarts.min.js"></script>
</head>
<body>
    <div id="map" style="width: 100%; height:450px"></div>
    <script type="text/javascript">
        var uploadedDataURL = '/json/贵州省/毕节市/金沙县.geojson'
        var myChart = echarts.init(document.getElementById('map'));
        function cityMap() {
          $.get(uploadedDataURL, function(geoJson) {
        	echarts.registerMap('中国各市县形状', geoJson);
        	option = {
        		backgroundColor: '#040c33',
        		title: {
        		  show: true,
        		  x: "center",
        		  y: "20",
        		  text: "金沙县区域地图",
        		  textStyle: {
        			color: "#fff",
        			fontSize: 22,
        			fontWeight: 'normal'
        		  }
        		},
        		"geo": {
        		  "map": "中国各市县形状",
        		  "layoutCenter": ["50%", "55%"],
        		  "layoutSize": "82%",
        		  "roam": false, //是否允许缩放
        		  "mapLocation": {
        			"width": "100%",
        			"height": "85%"
        		  },
        		  label: {
        			normal: { //静态的时候展示样式
        			  show: true, //是否显示地图份得名称
        			  textStyle: {
        				color: "#fff",
        				fontSize: 12
        			  }
        			},
        			emphasis: { //动态展示的样式
        			  color: '#fff',
        			},
        		  },
        		  itemStyle: {
                    normal: {
                      areaColor: '#3a7fd5',
                      borderColor: '#0a53e9', //线
                      shadowColor: '#092f8f', //外发光
                      shadowBlur: 20,
                    },
                    emphasis: {
                       areaColor: '#0a2dae', //悬浮区背景
                    },
                 },
        		},
        	  },
        	  myChart.setOption(option);
        	  window.addEventListener("resize", function() {
        		myChart.resize();
        	  })
          });
        }
        cityMap()
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：