先上图
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 ... } );