Echarts实现全国数据统计，并可以点击省份查看城市数据

Echarts实现全国数据统计，并可以点击省份查看城市数据

准备:

1.所需js

<script type="text/javascript" data-th-src="@{/echarts/4.2.0-rc.2/echarts.min.js}"></script>
<script type="text/javascript" data-th-src="@{/js/china.js}"></script>
<!-- 各个省份的js,省份js在使用中加载 -->

2.前端代码

<div class="box">
	<!-- 标签使用量统计 -->
	<div class="box-header">
		<h3 class="box-title">全国数据统计</h3>
	</div>
	<div id="china_div" class="col-md-12" style="height:600px;"></div>
	<!-- 渲染容器一定要设置宽高 -->
</div>

3.js代码

function initChina(){
	var splitList = [{start: 400, end:500},
	                 {start: 300, end: 400},
	                 {start: 200, end: 300},
	                 {start: 100, end: 200},
	                 {start: 0, end: 100}];
	
		var mydata = [  
             {name: '北京',value: '100' },{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 mydata1 = [
						{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 optionMap = {  
	            backgroundColor: '#FFFFFF',  
	            tooltip : {
	                trigger: 'item'  
	            },  
	            //左侧小导航图标
	            visualMap: {
	                left: 'left',
	                top: 'top',
	                splitList:splitList,
	                color: ['red', '#9feaa5', '#85daef','#74e2ca', '#e6ac53'],
	                show:true
	            },
	            //配置属性
	            series: [{  
	                name: '量级',  
	                type: 'map',  
	                mapType: 'china', // 地图类型，支持world，china及全国34个省市自治区  
	                roam: false,  // 是否开启滚轮缩放和拖拽漫游,默认为false（关闭），其他有效输入为true（开启），'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）
	                label: {  
	                    normal: {  
	                        show: true  //省份名称  
	                    },  
	                    emphasis: {  
	                        show: false  
	                    }  
	                },
	                data:mydata  //数据
	            }] 
	        }; 
		
		//初始化echarts实例
	    var myChart = echarts.init(document.getElementById('china_div'));
// 	    //使用制定的配置项和数据显示图表
	    myChart.setOption(optionMap);
	    
	    myChart.on('click', function (params) {
	    	goProvince(myChart,params,splitList,mydata1,optionMap);
	    });
	  	
}

//渲染城市地图
function goProvince(myChart,params,splitList,mydata1,optionMap){
	$.getJSON('js/Province/' + (params.name) + '.js', function (geoJson) {
		myChart.hideLoading();
		echarts.registerMap((params.name), geoJson);
		var option = {
	            backgroundColor: '#FFFFFF',  
	            tooltip : {
	                trigger: 'item'  
	            },  
	            //左侧小导航图标
	            visualMap: {
	                left: 'left',
	                top: 'top',
	                splitList:splitList,
	                color: ['red', '#9feaa5', '#85daef','#74e2ca', '#e6ac53'],
	                show:true
	            },
	            //配置属性
	            series: [{  
	                name: '量级',  
	                type: 'map',  
	                mapType: (params.name), // 地图类型，支持world，china及全国34个省市自治区，例如：河北、北京  
	                roam: false,  // 是否开启滚轮缩放和拖拽漫游,默认为false（关闭），其他有效输入为true（开启），'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）
	                label: {  
	                    normal: {  
	                        show: true  //省份名称  
	                    },  
	                    emphasis: {  
	                        show: false  
	                    }  
	                },
	                data:mydata1  //数据
	            }] 
	        };
		//使用制定的配置项和数据显示图表
	    myChart.setOption(option);
		//点击城市返回全国地图
	    myChart.on('click', function (params) {
	    	myChart.setOption(optionMap);
	    });
	});
}
	
	
function randomData() {  
    return Math.round(Math.random()*500);  
}

效果