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
});
超级彩蛋