echarts4引用json数据实现地图

文件引入

地图json文件下载： echarts4.js: html或js中引入文件 注意:引用的路径要对 地图json文件:china_geo.json

echarts代码实现

//界面初始化完成后调用
	$(function(){
          
   
			//校验代码是否执行
			alert(0);
			//引用地图的json文件,路径一定要引用对,否则界面显示不出图标
			$.get(/soyking/static/js/echarts/china_geo.json,function(geoJson){
          
   
				alert(1);
				//注册地图 根据引用的地图文件确定
				echarts.registerMap("china",geoJson); 
				var map = echarts.init(document.getElementById("mapDiv"));
				var mapOption = {
          
   
					//鼠标提示框
			        tooltip: {
          
   
			            trigger: item,
			            showDelay: 0,
			            transitionDuration: 0.2,
			            formatter: function (params) {
          
   
			                return params.seriesName + <br/> + params.name + :  + params.value;
			            }
			        },
			        //是视觉映射组件
			        visualMap: {
          
   
			            left: right,
			            min: 100,
			            max: 3800,
			            inRange: {
          
   
			                color: [#313695, #4575b4, #74add1, #abd9e9, #e0f3f8, #ffffbf, #fee090, #fdae61, #f46d43, #d73027, #a50026]
			            },
			            text:[High,Low],           // 文本，默认为数值文本
			            calculable: true
			        },
			        //工具箱
			        toolbox: {
          
   
			            show: true,
			            //orient: vertical,
			            left: left,
			            top: top,
			            feature: {
          
   
			                dataView: {
          
   readOnly: false},
			                restore: {
          
   },
			                saveAsImage: {
          
   }
			            }
			        },
			        //数据
					series:[
	                    {
          
   
	                        name:1,
	                        type:map,
	                        map:china, //类型,与上文中注册地图的名称一致
	                        zoom:0.8,
	                        label: {
          
   
	                            normal: {
          
   
	                                show: true
	                            },
	                            emphasis: {
          
   
	                                show: true
	                            }
	                        },
	                        mapLocation:{
          
   
	                            y:60
	                        },
	                        itemSytle:{
          
   
	                            emphasis:{
          
   label:{
          
   show:false}}
	                        },
	                        data:[
	                        	{
          
   name:"湖南",value:125},
	                        	{
          
   name:"广东",value:125},
	                        	{
          
   name:"湖北",value:125},
	                        	{
          
   name:"广西",value:125},
	                        	{
          
   name:"福建",value:125},
	                        	{
          
   name:"北京",value:125},
	                        	{
          
   name:"上海",value:125}
	                        ]
	                    }
	                ]
				};
				map.setOption(mapOption);
				
				//鼠标每5s轮播数据
				var index = 0;
				setInterval(function(){
          
   
					map.dispatchAction({
          
   
						type: showTip,
						seriesIndex: 0,
						dataIndex: index++
					});
					if(index > 10){
          
   
						index = 0;
					}
				},5000)
				
				map.resize();
			});
		});

文件目录结构

json文件目录不知道怎么引用

从浏览器控制台的Network中选中一个js或css文件请求，看下文件请求的路径，然后看下你的json文件和对应文件夹的目录结构，调整一下就行。

实现效果

不同的地图引用对应的json地图数据即可: