Echartsによる地図ドリルダウン

#1 Echartsで中国地図を実現
*1)「Echartsを使って中国地図を実現する」という記事を参考に、中国地図の展示を完成する
        http://blog.csdn.net/u010520912/article/details/77980114
#2地図実装の書き方
*1)元コード:

	var option = {
		backgroundColor: '#FFFFFF',
		title: {
			text: '    ',
			subtext: '    ',
			x:'center'
		},
		tooltip : {
			trigger: 'item'
		},
		visualMap: {
			show : false,
			x: 'left',
			y: 'bottom',
			splitList: [ 
				{start: 500, end:600},{start: 400, end: 500},
				{start: 300, end: 400},{start: 200, end: 300},
				{start: 100, end: 200},{start: 0, end: 100},
			],
			color: ['#66CC33', '#00FF00', '#66FF33','#339900', '#33CC00', '#00CC00']
		},
		series: [{
			name: '    ',
			type: 'map',
			mapType: 'china', 
			roam: true,
			label: {
				normal: {
					show: false
				},
				emphasis: {
					show: false
				}
			},
			data:mydata
		}]
	};
	var chart = echarts.init(document.getElementById('main'));
 chart.setOption(option);

*2)書き換え後のコード(コードをメソッドに入れ、mapTypeとdataを外部パラメータとする):

function drawMap(darwMapType, data) {
	var option = {
		backgroundColor: '#FFFFFF',
		title: {
			text: '    ',
			subtext: '    ',
			x:'center'
		},
		tooltip : {
			trigger: 'item'
		},
		visualMap: {
			show : false,
			x: 'left',
			y: 'bottom',
			splitList: [ 
				{start: 500, end:600},{start: 400, end: 500},
				{start: 300, end: 400},{start: 200, end: 300},
				{start: 100, end: 200},{start: 0, end: 100},
			],
			color: ['#16CC33', '#10FF00', '#16FF33','#139900', '#13CC00', '#10CC00']
		},
		series: [{
			name: '    ',
			type: 'map',
			mapType: darwMapType, 
			roam: true,
			label: {
				normal: {
					show: false
				},
				emphasis: {
					show: false
				}
			},
			data:data
		}]
	};
	echarts.dispose(document.getElementById('main'));
	var chart = echarts.init(document.getElementById('main'));
	chart.setOption(option);
}

*3)メソッドを書き換えてonloadで呼び出す

window.onload = function() {
	drawMap('china', mydata);
}

#3地図ドリルダウンを実現
*1)地図ドリルダウンは、クリック、ダブルクリック(移動先ではサポートされていません)、または長押しトリガを使用して実現します.ここではダブルクリック(複数回ドリルダウンと戻り関数の作成は保留)を使用します.

chart.on("dblclick", function(param) {
	drawMap(param.name, guangdongData);
});

#4完全なコードと実現効果
*1)完全コード

    
    
	 
	 


    

	
	function randomData() {
		return Math.round(Math.random()*500);
	}

	var mydata = [
		{name: '  ',value: randomData() },{name: '  ',value: randomData() },
		{name: '  ',value: randomData() },{name: '  ',value: randomData() },
		{name: '  ',value: randomData() },{name: '  ',value: randomData() },
		{name: '  ',value: randomData() },{name: '  ',value: randomData() },
		{name: '   ',value: randomData() },{name: '  ',value: randomData() },
		{name: '  ',value: randomData() },{name: '  ',value: randomData() },
		{name: '  ',value: randomData() },{name: '  ',value: randomData() },
		{name: '  ',value: randomData() },{name: '  ',value: randomData() },
		{name: '  ',value: randomData() },{name: '  ',value: randomData() },
		{name: '  ',value: randomData() },{name: '  ',value: randomData() },
		{name: '   ',value: randomData() },{name: '  ',value: randomData() },
		{name: '  ',value: randomData() },{name: '  ',value: randomData() },
		{name: '  ',value: randomData() },{name: '  ',value: randomData() },
		{name: '  ',value: randomData() },{name: '  ',value: randomData() },
		{name: '  ',value: randomData() },{name: '  ',value: randomData() },
		{name: '  ',value: randomData() },{name: '  ',value: randomData() },
		{name: '  ',value: randomData() },{name: '  ',value: randomData() }
	];
	
	var guangdongData = [
		{name: '   ',value: randomData() },{name: '   ',value: randomData() },
		{name: '   ',value: randomData() },{name: '   ',value: randomData() },
		{name: '   ',value: randomData() },{name: '   ',value: randomData() },
		{name: '   ',value: randomData() },{name: '   ',value: randomData() },
		{name: '   ',value: randomData() },{name: '   ',value: randomData() },
		{name: '   ',value: randomData() },{name: '   ',value: randomData() },
		{name: '   ',value: randomData() },{name: '   ',value: randomData() },
		{name: '   ',value: randomData() },{name: '   ',value: randomData() },
		{name: '   ',value: randomData() },{name: '   ',value: randomData() },
		{name: '   ',value: randomData() },{name: '   ',value: randomData() },
		{name: '   ',value: randomData() },{name: '   ',value: randomData() }
	];
	
	function drawMap(darwMapType, data) {
		var option = {
			backgroundColor: '#FFFFFF',
			title: {
				text: '    ',
				subtext: '    ',
				x:'center'
			},
			tooltip : {
				trigger: 'item'
			},
			visualMap: {
				show : false,
				x: 'left',
				y: 'bottom',
				splitList: [ 
					{start: 500, end:600},{start: 400, end: 500},
					{start: 300, end: 400},{start: 200, end: 300},
					{start: 100, end: 200},{start: 0, end: 100},
				],
				color: ['#16CC33', '#10FF00', '#16FF33','#139900', '#13CC00', '#10CC00']
			},
			series: [{
				name: '    ',
				type: 'map',
				mapType: darwMapType, 
				roam: true,
				label: {
					normal: {
						show: false
					},
					emphasis: {
						show: false
					}
				},
				data:data
			}]
		};
		echarts.dispose(document.getElementById('main'));//        
		var chart = echarts.init(document.getElementById('main'));
		chart.setOption(option);
		
		chart.on("dblclick", function(param) {
			drawMap(param.name, guangdongData);
		});
	}
 	
	window.onload = function() {
		drawMap('china', mydata);
	}

	

*2)実現効果(ダブルクリックドリル広東)