Echarts地图

最近项目需要，研究前端。

工具：HBuilder.

<script type="text/javascript">
		$.get('220100.json', function (CcJson){
			echarts.registerMap('长春', CcJson);
			var myChart9 = echarts.init(document.getElementById('changchun_map'));
			var option9 = {
				title: {  
	                text: '长春-test',  
	                left:'center'  
				},
				tooltip: {
		          	//提示框,飘窗
		          	trigger: 'item',
		          	backgroundColor:'#000',
		          	textStyle:{
		          		color:'#f2ec10'
		          	}
		       	},
		        legend: {
                    //地图上面的点
                 	orient: 'vertical'
              	},
              	itemStyle:{
              		normal:{
              			backgroundColor:'#000'
              		},
              		emphasis:{
              			backgroundColor:'#000'
              		}
              	},
	            series:[{
                    name:'XX数据',
	            	type:'map',
	        		mapType:'长春',
	        		roam: false,
	        		label: {//地图上面文字
	                    normal: {show: true，color:'#fff'},
	                    //选中状态
                        emphasis: {show: true,color:'#000'}
	        		},
	        		data:[
	        			{name:'宽城区',value:401178},
	        			{name:'绿园区',value:401178},
	        			{name:'朝阳区',value:401178},
	        			{name:'德惠市',value:401178},
	        			{name:'二道区',value:401178},
	        			{name:'九台市',value:401178},
	        			{name:'南关区',value:281953},
	        			{name:'农安县',value:170259},
	        			{name:'双阳区',value:171110},
	        			{name:'榆树市',value:371027}
	        		]			
	            }]
	        };
            //轮播
	        var count = 0;
			var timeTicket = null;
			var dataLength = option9.series[0].data.length;
			timeTicket && clearInterval(timeTicket);
			timeTicket = setInterval(function() {
				myChart9.dispatchAction({
					type: 'downplay',
					seriesIndex: 0,
				});
				myChart9.dispatchAction({
					type: 'highlight',
					seriesIndex: 0,
					dataIndex: (count) % dataLength
				});
				myChart9.dispatchAction({
					type: 'showTip',
					seriesIndex: 0,
					dataIndex: (count) % dataLength
				});
				count++;
			}, 1500);
			myChart9.on('mouseover', function(params) {
				console.log(params);
				clearInterval(timeTicket);
				myChart9.dispatchAction({
					type: 'downplay',
					seriesIndex: 0
				});
				myChart9.dispatchAction({
					type: 'highlight',
					seriesIndex: 0,
					dataIndex: params.dataIndex
				});
				myChart9.dispatchAction({
					type: 'showTip',
					seriesIndex: 0,
					dataIndex: params.dataIndex
				});
			});
			myChart9.on('mouseout', function(params) {
				timeTicket && clearInterval(timeTicket);
				timeTicket = setInterval(function() {
				myChart9.dispatchAction({
					type: 'downplay',
					seriesIndex: 0,
				});
				myChart9.dispatchAction({
					type: 'highlight',
					seriesIndex: 0,
					dataIndex: (count) % dataLength
				});
				myChart9.dispatchAction({
					type: 'showTip',
					seriesIndex: 0,
					dataIndex: (count) % dataLength
				});
				count++;
			}, 1500);
		});
        myChart9.setOption(option9);
        window.onresize = myChart9.resize;
		});
	</script>