echart展示县的geojson地图例子_geojson如何配合echart显示-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43082983/article/details/85235468

echart展示县的geojson地图

html页面代码：

<body>
<div id="chart"></div>
<script src="/static/js/jquery-2.1.1.js"></script>
<script src="/static/js/echarts/echarts.min.js?version=1.0.1"></script>
</body>

js代码：

$(function () {
   initChart();
});
      function initChart(){
	    $("#chart").css({"width":"1200px","height":"600px","margin":"auto"});
	    var myChart = echarts.init(document.getElementById("chart"));
	   // myChart.showLoading();
	    $.get('/static/js/geojson/map.geojson', function (dataJson) {
	       // myChart.hideLoading();

    
echarts.registerMap('region', dataJson);
 var   option = {
        series: [
            {
                name: '县级地图',
                type: 'map',
                roam: true,
                // zoom:0.5, //默认显示级别
                // scaleLimit:{min:0.1,max:3}, // 缩放级别
                map: 'region',
                itemStyle: {
                    normal: {
                        areaColor: '#45c8ff',
                        borderColor: '#fff'
                    },
                    emphasis: {
                        areaColor: '#00aeee'
                    }
                },
                // itemStyle:{
                //     emphasis:{label:{show:true}}
                // },
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: false
                    }
                } 
            }
        ]
    };
    myChart.setOption(option);
});

}

参考页面：
http://echarts.baidu.com/examples/editor.html?c=map-usa

下面的这个网站可以下载中国地图、省市县地图，在县地图的基础上画出具体的城镇图
http://datav.aliyun.com/tools/atlas/#&lat=33.578014746143985&lng=104.150390625&zoom=3

geojson格式地图生成推荐网站：
http://geojson.io/#map=2/20.0/0.0
此网站可以支持鼠标拖动画出geojson地图，县的城镇地图在网上没有找到资源，只能自己动手了。需要注意的是，echart只支持使用多边形画成的geojson地图。