默认已经echarts
import echarts from 'echarts'
import "echarts/map/js/china.js"; // 引入中国地图数据
import "echarts/map/js/world.js";
import bmap from 'echarts/extension/bmap/bmap.js'
import { loadBMap } from '@/assets/js/es5/map.js'
这里用的echarts的实列 代码省略掉
loadBMP文件
这里封装一下 因为会报一个错 错误原因在mounted 调用地图 而地图还没加载好
import { loadBMap } from ./map.js'
/* eslint-disable */
export function loadBMap (ak) {
return new Promise(function (resolve, reject) {
if (typeof BMap !== 'undefined') {
resolve(BMap)
return true
}
window.onBMapCallback = function () {
resolve(BMap)
}
let script = document.createElement('script')
script.type = 'text/javascript'
script.src =
'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&__ec_v__=20190126&callback=onBMapCallback' // 版本号自己控制
script.onerror = reject
document.head.appendChild(script)
})
}
尝试自定义地图样式 代码 省略掉了地图的坐标代码 最后会附上
var myChart = echarts.init(document.getElementById('china'), theme)
let option = {
title: {
text: '全国主要城市空气质量 - 百度地图',
subtext: 'data from PM25.in',
sublink: 'http://www.pm25.in',
left: 'center'
},
tooltip: {
trigger: 'item'
},
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true,
mapStyle: {
styleJson: goodsData
}
},
series: [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData(datas),
symbolSize: function (val) {
return val[2] / 10
},
encode: {
value: 2
},
label: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
label: {
show: true
}
}
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(datas.sort(function (a, b) { return b.value - a.value }).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 10
},
encode: {
value: 2
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
label: {
formatter: '{b}',
position: 'right',
show: true
},
itemStyle: {
shadowBlur: 10,
shadowColor: '#333'
},
emphasis: {
scale: true
},
zlevel: 1
}
]
}
myChart.setOption(option)
let bmap = myChart.getModel().getComponent("bmap").getBMap();
bmap.setMapStyle({ styleJson: goodsData, });
// 创建城市选择控件
var cityControl = new BMap.CityListControl({
// 控件的停靠位置(可选,默认左上角)
anchor: BMAP_ANCHOR_TOP_LEFT,
// // 控件基于停靠位置的偏移量(可选)
// offset: new bmap.Size(10, 5)
});
// 将控件添加到地图上
bmap.addControl(cityControl);
// 使用刚指定的配置项和数据显示图表。
$(window).resize(function () { // 自适应
myChart.resize();
})
在mounted中调用上面的方法 更具需求自己修改
mounted () {
this.$nextTick(() => {
loadBMap("XMpRSRWH7DbM5A5gL8ShHhWWOG2XAuIg").then(() => {
this.createdChart()
})
})
},
因为在json里面配置百度自定义的样式不起作用 所以在外面自己在引入一遍
样式的代码直接 到百度自己生成 百度地图个性化编辑器
[
{
"featureType": "land",
"elementType": "geometry",
"stylers": {
"color": "#242f3eff"
}
}, {
"featureType": "manmade",
"elementType": "geometry",
"stylers": {
"color": "#242f3eff"
}
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": {
"color": "#17263cff"
}
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": {
"color": "#9e7d60ff"
}
}, {
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": {
"color": "#554631ff"
}
}, {
"featureType": "districtlabel",
"elementType": "labels.text.fill",
"stylers": {
"color": "#d69563ff"
}
}, {
"featureType": "districtlabel",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#17263cff",
"weight": 3
}
}, {
"featureType": "poilabel",
"elementType": "labels.text.fill",
"stylers": {
"color": "#d69563ff"
}
}, {
"featureType": "poilabel",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#17263cff",
"weight": 3
}
}, {
"featureType": "subway",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "railway",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "poilabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "subwaylabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "subwaylabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "tertiarywaysign",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "tertiarywaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "provincialwaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "provincialwaysign",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "nationalwaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "nationalwaysign",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highwaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highwaysign",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "green",
"elementType": "geometry",
"stylers": {
"color": "#263b3eff"
}
}, {
"featureType": "nationalwaysign",
"elementType": "labels.text.fill",
"stylers": {
"color": "#d0021bff"
}
}, {
"featureType": "nationalwaysign",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "city",
"elementType": "labels",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "city",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "city",
"elementType": "labels.text.fill",
"stylers": {
"color": "#d69563ff"
}
}, {
"featureType": "city",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#17263cff"
}
}, {
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": {
"color": "#d69563ff"
}
}, {
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#242f3eff"
}
}, {
"featureType": "local",
"elementType": "geometry.fill",
"stylers": {
"color": "#38414eff"
}
}, {
"featureType": "local",
"elementType": "geometry.stroke",
&#