Echarts地图的基本使用方法

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

引入echarts

第一步：引入js文件

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

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

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

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

<divid="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、使用百度/高德 其他地图

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

• 引入方式

<scripttype="text/javascript"src="https://api.map.baidu.com/api?v=2.0&ak=你的AK"></script><scripttype="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(newBMap.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数据asyncgetGeoJson(jsonName){returnawaitthis.$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});

超级彩蛋