ECharts地图图审号（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 });

超级彩蛋