天天看點

百度地圖內建echarts并且在地圖上顯示動态告警圖形

先上圖

百度地圖內建echarts并且在地圖上顯示動态告警圖形

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

繼續閱讀