Echarts地图的基本使用方法

echarts使用地图的基本使用方法

引入echarts

第一步：引入js文件

下载的最新完整版本 echarts.min.js 即可

 <script src="echarts.min.js"> </script>复制

第二步：指定DOM元素作为图表容器

创建一个DOM来作为绘制图表的容器

 <div id="main" ref="main" style="width=100%; height = 400px"></div>复制

使用echarts进行初始化

 var myChart = echarts.init(document.getElementById('main'));
var myChart = echarts.init(this.$refs.main);复制

第三步：配置参数

 option={...}//配置项
myChart.setOption(option)  // 使用刚指定的配置项和数据显示图表。复制

引入地图底图

echarts现支持使用geoJSON及svg的形式引入

1、GeoJSON引入

导入标准的GeoJSON 格式的数据

 //GeoJSON格式
{
  "type": "Feature",
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [[[[112.52172,22.607262],[112.515742,22.626617],....]]]
  },
  "properties": {
    "name": "Dinagat Islands",
    .... //其他字段
  }
}复制

获取途径：

获取GeoJSON数据

可以获得2种JSON数据，xxx.json和xxx_full.json。

区别在于xxx.json只有当前行政区的轮廓数据，xxx_full.json包含子行政区的数据。
China_full.json China.json
自定义GeoJSON数据教程通过修改地图的GeoJSON数据来自定义地图底图

引入方法：

 echarts.registerMap('china', {geoJSON: geoJson}); //注册可用的地图，只在 geo 组件或者 map 图表类型中使用。
option={ 
    series: [{
        name: '中国地图',
        type: 'map',
        mapType: 'china', // 自定义扩展图表类型
    }]
}复制

2、SVG 引入（从 `v5.1.0` 开始）

 echarts.registerMap('svgName', {svg: svg});复制

3、使用百度/高德其他地图

除了自定义的地图底图，还可使用线上的地图。
可参考示例

引入方式

 <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
<script type="text/javascript"     src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>复制

 //如果是在vue下载了echarts组件 也可以通过require引入   插件会自动注册相应的组件。
require('echarts'); 
require('echarts/extension/bmap/bmap');复制

使用

 option={
    // 加载 bmap 组件
    bmap: {
        center: [120.13066322374, 30.240018034923], // 百度地图中心经纬度
        zoom: 14,   // 百度地图缩放
        roam: true, // 是否开启拖拽缩放，可以只设置 'scale' 或者 'move'
        mapStyle: {} // 百度地图的自定义样式，见 http://developer.baidu.com/map/jsdevelop-11.htm
    },
    series:[{
                type: 'line',
                coordinateSystem: 'bmap',   // 使用百度地图坐标系
                // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
                data: [ [120, 30, 1] ]
                ....
           }]
}
 
 
// 获取百度地图实例，使用百度地图自带的控件
var bmap = chart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());复制

地图展示

1、点特效

打点参考配置

 series : [{
    name: '打点',
    type: 'effectScatter',
    coordinateSystem: 'bmap',
    data: [
        {name: '海门', value: [121.15, 31.89, 9]},
        {name: '鄂尔多斯', value:[109.781327, 39.608266, 12]}
    ],
    encode: { //用哪个纬度的数据项
        value: 2
    },
    // ECharts 提供的标记类型包括: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'  可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
    symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
    symbolSize: function (val) {
        return val[2] / 10;
    },
    //配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
    showEffectOn: 'emphasis',
    
    //涟漪特效相关配置。
    rippleEffect: {
        brushType: 'stroke'
    },
    hoverAnimation: true,
    label: {
        formatter: '{b}',
        position: 'right',
        show: true
    },
    itemStyle: {
        color: '#f4e925',
        shadowBlur: 10,
        shadowColor: '#333'
    },
    zlevel: 1
}]复制

其他方法
在series:[]里面注入label标签，设定样式（包含引入图片）；

 series : [{
 label: {
   normal: {
     show: true,
     formatter:function(val){
       var area_content ='{b|'+val.name+'}'+'-'+'{a|'+val.value+'}';
       return area_content.split("-").join("\n");
     },
     itemStyle:{
       emphasis:{label:{show:true}},
       normal: {
         borderColor: 'rgba(151, 168, 151, 1)',
         areaColor: 'rgba(151, 168, 151, 1)',
         borderWidth: 2,
       },
     },
     rich: {
       a: {color: '#333',padding: 0,},
       b: {
           height: 32,
           color: '#fff',
           align:"center",
           fontSize: 13,
           padding: [0, 0, -3, 6],
           backgroundColor: {
image:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3395977486,1425992975&fm=26&gp=0.jpg'
          },
      },
    },
  },
 },
}]复制

2、线特效

参考配置

   var busLines=[{
       coords:[[116.397128, 39.916527],[121.48941, 31.40527]],
       lineStyle:{normal: {color: "#f1f313"}}
   },
   {
       coords:[[116.397128, 39.916527],[111.00189, 34.2198944]],
       lineStyle:{normal: {color: "#f1f313"}}
   }]
  option = {
        bmap: {
            center: [116.46, 39.92],
            zoom:5,
            roam: true, 
        },
        series: [
         {
            type: 'lines',
            coordinateSystem: 'bmap',
            polyline:false,
            // polyline: true,
            data: busLines,
            silent: true,
            lineStyle: {
                // color: '#c23531',
                // color: 'rgb(200, 35, 45)',
                opacity: 0.5,
                width: 2,
                curveness :0.2
            },
            progressiveThreshold: 500,
            progressive: 200
        }, 
        {
            type: 'lines',
            coordinateSystem: 'bmap',
            polyline: false,
            data: busLines,
            lineStyle: {
                width: 0,
                curveness :0.2
            },
            effect: {
                constantSpeed: 50,
                show: true,
                trailLength: 0.7,
                symbolSize: [3, 10],
                color :'rgb(255, 255, 255)'
            },
            zlevel: 1
        }]
    });
 复制

3、聚合打点

如果要用echart实现地图聚合打点，需结合在线地图，然后对每次的放大缩小事件都请求数据回来，再打点到地图上。（示例）

4、地图下钻

原理：其实就是每次点击后切换另一个地图
点击 --> 加载响应的json数据以及data数据 --> 注册新的地图，修改option --> setOption应用配置项

 this.initEcharts(GdGeoJson,'440000',[])
 
//给地图添加监听事件
this.myChart.on('click', params => {
  let clickRegionCode = params.data.cityCode;
  this.getGeoJson(clickRegionCode)
  .then(regionGeoJson => this.initEcharts(regionGeoJson.data, params.data.cityCode))
  .catch(err => {
    this.getGeoJson('440000').then(GdGeoJson=>this.initEcharts(GdGeoJson.data, '440000'))
  })
})
},
 
initEcharts(geoJson, name) {
  this.$echarts.registerMap(name, geoJson);
  //修改option
  option.series[0].mapType=name
  option.series[0].data=this.mapData
  this.myChart.setOption(option)
},
 
 
//获取地图json数据
async getGeoJson(jsonName) {
    return await this.$axios.get("/geoJson/" + jsonName + ".json")
},复制

5、多个geo同步进行缩放拖曳

 myChart.on('georoam', function (params) {
   var option = myChart.getOption();
   if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
     option.geo[1].zoom = option.geo[0].zoom;
     option.geo[1].center = option.geo[0].center;
   } else {//捕捉到拖曳时
     option.geo[1].center = option.geo[0].center;
   }
   myChart.dispatchAction({
     type: 'restore'
   })
   myChart.setOption(option);//设置option
 });复制

超级彩蛋

	var myChart = echarts.init(document.getElementById('main'));
	var myChart = echarts.init(this.$refs.main);

	option={...}//配置项
	myChart.setOption(option) // 使用刚指定的配置项和数据显示图表。

	//GeoJSON格式
	{
	"type": "Feature",
	"geometry": {
	"type": "MultiPolygon",
	"coordinates": [[[[112.52172,22.607262],[112.515742,22.626617],....]]]
	},
	"properties": {
	"name": "Dinagat Islands",
	.... //其他字段
	}
	}

	echarts.registerMap('china', {geoJSON: geoJson}); //注册可用的地图，只在 geo 组件或者 map 图表类型中使用。
	option={
	series: [{
	name: '中国地图',
	type: 'map',
	mapType: 'china', // 自定义扩展图表类型
	}]
	}

	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
	<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>

	//如果是在vue下载了echarts组件也可以通过require引入插件会自动注册相应的组件。
	require('echarts');
	require('echarts/extension/bmap/bmap');

	option={
	// 加载 bmap 组件
	bmap: {
	center: [120.13066322374, 30.240018034923], // 百度地图中心经纬度
	zoom: 14, // 百度地图缩放
	roam: true, // 是否开启拖拽缩放，可以只设置 'scale' 或者 'move'
	mapStyle: {} // 百度地图的自定义样式，见 http://developer.baidu.com/map/jsdevelop-11.htm
	},
	series:[{
	type: 'line',
	coordinateSystem: 'bmap', // 使用百度地图坐标系
	// 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
	data: [ [120, 30, 1] ]
	....
	}]
	}


	// 获取百度地图实例，使用百度地图自带的控件
	var bmap = chart.getModel().getComponent('bmap').getBMap();
	bmap.addControl(new BMap.MapTypeControl());

	series : [{
	name: '打点',
	type: 'effectScatter',
	coordinateSystem: 'bmap',
	data: [
	{name: '海门', value: [121.15, 31.89, 9]},
	{name: '鄂尔多斯', value:[109.781327, 39.608266, 12]}
	],
	encode: { //用哪个纬度的数据项
	value: 2
	},
	// ECharts 提供的标记类型包括: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
	symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
	symbolSize: function (val) {
	return val[2] / 10;
	},
	//配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
	showEffectOn: 'emphasis',

	//涟漪特效相关配置。
	rippleEffect: {
	brushType: 'stroke'
	},
	hoverAnimation: true,
	label: {
	formatter: '{b}',
	position: 'right',
	show: true
	},
	itemStyle: {
	color: '#f4e925',
	shadowBlur: 10,
	shadowColor: '#333'
	},
	zlevel: 1
	}]

	series : [{
	label: {
	normal: {
	show: true,
	formatter:function(val){
	var area_content ='{b\|'+val.name+'}'+'-'+'{a\|'+val.value+'}';
	return area_content.split("-").join("\n");
	},
	itemStyle:{
	emphasis:{label:{show:true}},
	normal: {
	borderColor: 'rgba(151, 168, 151, 1)',
	areaColor: 'rgba(151, 168, 151, 1)',
	borderWidth: 2,
	},
	},
	rich: {
	a: {color: '#333',padding: 0,},
	b: {
	height: 32,
	color: '#fff',
	align:"center",
	fontSize: 13,
	padding: [0, 0, -3, 6],
	backgroundColor: {
	image:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3395977486,1425992975&fm=26&gp=0.jpg'
	},
	},
	},
	},
	},
	}]

	var busLines=[{
	coords:[[116.397128, 39.916527],[121.48941, 31.40527]],
	lineStyle:{normal: {color: "#f1f313"}}
	},
	{
	coords:[[116.397128, 39.916527],[111.00189, 34.2198944]],
	lineStyle:{normal: {color: "#f1f313"}}
	}]
	option = {
	bmap: {
	center: [116.46, 39.92],
	zoom:5,
	roam: true,
	},
	series: [
	{
	type: 'lines',
	coordinateSystem: 'bmap',
	polyline:false,
	// polyline: true,
	data: busLines,
	silent: true,
	lineStyle: {
	// color: '#c23531',
	// color: 'rgb(200, 35, 45)',
	opacity: 0.5,
	width: 2,
	curveness :0.2
	},
	progressiveThreshold: 500,
	progressive: 200
	},
	{
	type: 'lines',
	coordinateSystem: 'bmap',
	polyline: false,
	data: busLines,
	lineStyle: {
	width: 0,
	curveness :0.2
	},
	effect: {
	constantSpeed: 50,
	show: true,
	trailLength: 0.7,
	symbolSize: [3, 10],
	color :'rgb(255, 255, 255)'
	},
	zlevel: 1
	}]
	});

	this.initEcharts(GdGeoJson,'440000',[])

	//给地图添加监听事件
	this.myChart.on('click', params => {
	let clickRegionCode = params.data.cityCode;
	this.getGeoJson(clickRegionCode)
	.then(regionGeoJson => this.initEcharts(regionGeoJson.data, params.data.cityCode))
	.catch(err => {
	this.getGeoJson('440000').then(GdGeoJson=>this.initEcharts(GdGeoJson.data, '440000'))
	})
	})
	},

	initEcharts(geoJson, name) {
	this.$echarts.registerMap(name, geoJson);
	//修改option
	option.series[0].mapType=name
	option.series[0].data=this.mapData
	this.myChart.setOption(option)
	},


	//获取地图json数据
	async getGeoJson(jsonName) {
	return await this.$axios.get("/geoJson/" + jsonName + ".json")
	},

	myChart.on('georoam', function (params) {
	var option = myChart.getOption();
	if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
	option.geo[1].zoom = option.geo[0].zoom;
	option.geo[1].center = option.geo[0].center;
	} else {//捕捉到拖曳时
	option.geo[1].center = option.geo[0].center;
	}
	myChart.dispatchAction({
	type: 'restore'
	})
	myChart.setOption(option);//设置option
	});