echarts地图json实现

echarts3.0以后取消了内置地图，可以用百度地图或者json或者js。本文章用的json

首先导入jquery和echarts。只要输入每个城市或者省份的json就行。

这个是全国各省市 json资源：https://download.csdn.net/download/weixin_38959210/10543965

因为用到了ajax，所以必须有服务才能运行。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="./js/jquery-2.0.0.js" ></script>
   
    <script type="text/javascript" src="js/echarts.min.js" ></script>

     
    
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:500px;"></div>

</body>
   <script type="text/javascript">

	    	$.get('jspro/wuzhong.json', function (gansuJson){
        echarts.registerMap('吴忠', gansuJson);
        var chart = echarts.init(document.getElementById('main'));
        
        var dataMap = [{ name: '利通区' }, { name: '青铜峡市' }, { name: '盐池县' },{ name: '红寺堡区' },{ name: '同心县' },{ name: '上海' }];
         
        option = {
            title: {
            	x: 'left',
            	y: 'top',
                text: '2015吴忠市人口数量',
                subtext:"人口密度数据来自吴忠市统计局年鉴"
            },
            
             tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (人)'
        },
              toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
            
        visualMap: {
            min: 170259,
            max: 401178,
            text:['max','min'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue','yellow', 'orangered']
            }
        },

            series:[
            	{
            		name:'人口数量',
            		type:'map',
            		map:'吴忠',
            	
            		mapLocation:{
            			y:100
            		},
            		itemSytle:{
            			normal:{label:{show:true}},
            			emphasis:{label:{show:false}}
            		},
            		 label: {
                    normal: {show: true},
                    emphasis: {show: true},
                    
                   },
            		data:[
            			{name:'利通区',value:401178},
            			{name:'青铜峡市',value:281953},
            			{name:'盐池县',value:170259},
            			{name:'红寺堡区',value:171110},
            			{name:'同心县',value:371027},
            		
            		],
            						
            	}
            ],
            
        };
        chart.setOption(option);
});


 </script>
</html>

echarts地图json实现

猜你喜欢