先上圖
js代碼:
require.config({
paths: {
echarts: './js/dist'
},
packages: [
{
name: 'BMap',
//location: './js/migration/js/src',
location: './js/extension/BMap/src',
main: 'main'
}
]
});
require(
[
'echarts',
'BMap',
'echarts/theme/macarons',
'echarts/chart/line', // 按需加載所需圖表,如需動态類型切換功能,别忘了同時加載相應圖表
'echarts/chart/bar',
'echarts/chart/pie',
'echarts/chart/radar',
'echarts/chart/gauge',
'echarts/chart/map'
],
function (echarts, BMapExtension){
BMapExt = new BMapExtension($('#l-map')[0], BMap, echarts);
map = BMapExt.getMap();
container = BMapExt.getEchartsContainer();
var point = new BMap.Point(121.473065,31.236176);//上海中心點坐标
map.centerAndZoom(point, 12);
map.enableScrollWheelZoom(true);//允許滑鼠滑輪放大縮小
//主題設定
var mapStyle = {
features: ["road", "building", "water", "land"],//隐藏地圖上的poi
//style: "dark" //設定地圖風格為高端黑
style: "midnight" //設定地圖風格午夜藍
}
map.setMapStyle(mapStyle);
option = {
series : [
{
type: 'map',
mapType: 'none',
data: [],
geoCoord: {
"上海站":[121.482264,31.267294],
"長風公園":[121.410399,31.225801]
},
markPoint: {
symbol: 'emptyCircle',
symbolSize : 20,
effect: {
show: true,
scaleSize: 1,
period: 10,
color: 'red',
shadowBlur: 5
},
data: [
{name: "上海站", value: 39},
{name: "長風公園", value: 46}
]
}
}
]
};
myMapChart = BMapExt.initECharts(container);
BMapExt.setOption(option);
//圖形start
...
}
);