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>
   
   <script src="https://www.makeapie.com/dep/jquery/jquery.min.js"></script>
  <script src="https://gallerybox.echartsjs.com/dep/echarts/latest/echarts.min.js"></script>
 
 
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:500px;"></div>
 
</body>
   <script type="text/javascript">
 
	    	$.get('json/wuzhong.json', function (gansuJson){
        
		echarts.registerMap('wuzhong', gansuJson);
		
		
        var chart = echarts.init(document.getElementById('main'));
        
        var dataMap = [{ 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:'wuzhong',
            	
            		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>

 

http://qushen.top/idea.html

 

©️2020 CSDN 皮肤主题: 撸撸猫 设计师:设计师小姐姐 返回首页