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 { content: ''; display: block;

基于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 功能 登陆验证 问题类型包括 单选、多选及问答三类 查看问卷列表、删除 填写提交问卷 问卷结果列表及结果详情 注: 在系统实现过程中,数据表的设计及数据操作有些麻烦,感兴趣的往下看: 为了问卷结果的可读性及统计方便,数据表设计时将 问卷、问题、选项 分为三个表,在插入、读取问卷时,