Echarts3 中国地图下钻至县级

2016-11-29 02:41:39

Echarts3 地图下钻至县级

看了会D3.js,鉴于学习曲线较高,且要实现的效果不复杂,遂使用Echarts完成——中国地图下钻至县级。

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>echarts3中国地图下钻至县级</title>
	<link rel="stylesheet" type="text/css" href="static/css/main.css">
	<!-- Echarts3 -->
	<script type="text/javascript" src="static/js/echarts.min.js"></script>
	<!-- 全国344个市、区、州对应的数字编号 -->
	<script type="text/javascript" src="static/js/citymap.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:800px;"></div>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/app.js"></script>
</body>
</html>

JavaScript

//地图容器
var chart = echarts.init(document.getElementById('main'));
//34个省、市、自治区的名字拼音映射数组
var provinces = {
    //23个省
    "台湾": "taiwan",
    "河北": "hebei",
    "山西": "shanxi",
    "辽宁": "liaoning",
    "吉林": "jilin",
    "黑龙江": "heilongjiang",
    "江苏": "jiangsu",
    "浙江": "zhejiang",
    "安徽": "anhui",
    "福建": "fujian",
    "江西": "jiangxi",
    "山东": "shandong",
    "河南": "henan",
    "湖北": "hubei",
    "湖南": "hunan",
    "广东": "guangdong",
    "海南": "hainan",
    "四川": "sichuan",
    "贵州": "guizhou",
    "云南": "yunnan",
    "陕西": "shanxi1",
    "甘肃": "gansu",
    "青海": "qinghai",
    //5个自治区
    "新疆": "xinjiang",
    "广西": "guangxi",
    "内蒙古": "neimenggu",
    "宁夏": "ningxia",
    "西藏": "xizang",
    //4个直辖市
    "北京": "beijing",
    "天津": "tianjin",
    "上海": "shanghai",
    "重庆": "chongqing",
    //2个特别行政区
    "香港": "xianggang",
    "澳门": "aomen"
};

//直辖市和特别行政区-只有二级地图,没有三级地图
var special = ["北京","天津","上海","重庆","香港","澳门"];
var mapdata = [];
//绘制全国地图
$.getJSON('static/map/china.json', function(data){
	d = [];
	for( var i=0;i<data.features.length;i++ ){
		d.push({
			name:data.features[i].properties.name
		})
	}
	mapdata = d;
	//注册地图
	echarts.registerMap('china', data);
	//绘制地图
	renderMap('china',d);
});

//地图点击事件
chart.on('click', function (params) {
	console.log( params );
	if( params.name in provinces ){
		//如果点击的是34个省、市、自治区,绘制选中地区的二级地图
		$.getJSON('static/map/province/'+ provinces[params.name] +'.json', function(data){
			echarts.registerMap( params.name, data);
			var d = [];
			for( var i=0;i<data.features.length;i++ ){
				d.push({
					name:data.features[i].properties.name
				})
			}
			renderMap(params.name,d);
		});
	}else if( params.seriesName in provinces ){
		//如果是【直辖市/特别行政区】只有二级下钻
		if(  special.indexOf( params.seriesName ) >=0  ){
			renderMap('china',mapdata);
		}else{
			//显示县级地图
			$.getJSON('static/map/city/'+ cityMap[params.name] +'.json', function(data){
				echarts.registerMap( params.name, data);
				var d = [];
				for( var i=0;i<data.features.length;i++ ){
					d.push({
						name:data.features[i].properties.name
					})
				}
				renderMap(params.name,d);
			});	
		}	
	}else{
		renderMap('china',mapdata);
	}
});

//初始化配置
var option = {
	backgroundColor: '#000',
    title : {
        text: 'Echarts3 中国地图下钻至县级',
        subtext: '三级下钻',
        link:'http://www.ldsun.com',
        left: 'center',
        textStyle:{
            color: '#fff',
            fontSize:16,
            fontWeight:'normal',
            fontFamily:"Microsoft YaHei"
        },
        subtextStyle:{
        	color: '#ccc',
            fontSize:13,
            fontWeight:'normal',
            fontFamily:"Microsoft YaHei"
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        },
        iconStyle:{
        	normal:{
        		color:'#fff'
        	}
        }
    },
    animationDuration:1000,
	animationEasing:'cubicOut',
	animationDurationUpdate:1000
     
};
//绘制地图
function renderMap(map,data){
	option.title.subtext = map;
    option.series = [ 
		{
            name: map,
            type: 'map',
            mapType: map,
            roam: false,
            nameMap:{
			    'china':'中国'
			},
            label: {
	            normal:{
					show:true,
					textStyle:{
						color:'#999',
						fontSize:13
					}  
	            },
	            emphasis: {
	                show: true,
	                textStyle:{
						color:'#fff',
						fontSize:13
					}
	            }
	        },
	        itemStyle: {
	            normal: {
	                areaColor: '#323c48',
	                borderColor: 'dodgerblue'
	            },
	            emphasis: {
	                areaColor: 'darkorange'
	            }
	        },
            data:data
        }	
    ];
    //渲染地图
    chart.setOption(option);
}

demo:https://flute.github.io/echarts3-chinese-map-drill-down/

github:

百度地图竟然不提供台湾地图的下载,2333....俨然是某台独派程序猿写的

background滤镜效果及高斯模糊

background滤镜效果 场景及实现:父级div嵌套子div,父div有背景图片,子div中有文字,需要实现背景图加黑色半透明遮罩,不影响子div中文字的显示效果。 CSS的filter滤镜效果的Brightness属性可以实现遮罩效果,但是类似于opacity属性,这种效果会影响子div的显示效果: 解决方法: <div id="section1"> <div id="content"> </div> </div> #section1 { background: url('../images/bg-img.jpg') center center no-repeat; background-size: cover; position: relative; } #content { position: absolute; } #section1::before

基于nodejs的问卷调查系统

花了4天时间撸了一个问卷调查系统,算是入门nodejs后端开发。 github传送门:https://github.com/flute/survey 技术 后端:nodejs+express+mysql 前端:material design install npm install 配置数据库 conf/db.js ,导入sql文件 mysql.sql node app.js 功能 登陆验证 问题类型包括 单选、多选及问答三类 查看问卷列表、删除 填写提交问卷 问卷结果列表及结果详情 注: 在系统实现过程中,数据表的设计及数据操作有些麻烦,感兴趣的往下看: 为了问卷结果的可读性及统计方便,数据表设计时将 问卷、问题、选项 分为三个表,在插入、读取问卷时,