2019-04-04-echart3中国地图（重庆地图）

背景

近期开发中涉及echart3地图标注涟漪特效展示，及简单的点击操作，这里做下记录，包含自己整理的中国地图、重庆地图经纬度数据。

html标签

<div id="main" style="width: 812px;height: 550px; "></div>

大屏适配

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
<link rel="stylesheet" media="@media screen and (min-width: 1080px) and (max-width: 1281px)" href="demo1280.css">
<link rel="stylesheet" media="@media screen and (min-width: 1281px) and (max-width: 1440px)" href="demo1366.css">

echart3百度地图

重庆地图、中国地图数据（包含两组经纬度数据，兼容1920*768 及 1366 * 768）

var myChart = null;
var showMapChina = true;
var levelArr = null;
var convertData = function (geoCoordMap, mapData) {
    var res = [];
    if (Array.isArray(mapData)) {
        for (var i = 0; i < mapData.length; i++) {
            var geoCoord = geoCoordMap[mapData[i].name];
            if (geoCoord) {
                res.push({
                    name: mapData[i].name,
                    value: geoCoord.concat(mapData[i].value)
                });
            }
        }
    } else {
        for (var key in mapData) {
            // console.log("属性：" + key + ",值：" + mapData[key] + ',geo：' + geoCoordMap[key]);
            var geoCoord = geoCoordMap[key];
            if (geoCoord) {
                var data = {
                    name: key,
                    value: geoCoord.concat(mapData[key]),
                }
                if (showMapChina) {
                    data.level = levelArr[key]
                }
                res.push(data);
            }
        }
    }

    return res;
};
// 中国地图省市经纬度
var geoCoordMap = null
// 大屏下 中国地图经纬度
const geoCoordMapBig = {
    '北京市': [116.46, 39.92],
    '重庆市': [106.54, 29.59],
    '上海市': [121.48, 31.22],
    '天津市': [117.5, 39.13],
    '河北省': [114.48, 37.03],
    '山西省': [111.73, 37.87],
    '辽宁省': [122.18, 41.8],
    '吉林省': [125.35, 43.88],
    '黑龙江省': [126.63, 46.75],
    '江苏省': [120.18, 32.54],
    '浙江省': [120.19, 28.66],
    '安徽省': [117.27, 31.86],
    '福建省': [119.3, 26.08],
    '江西省': [115.89, 28.68],
    '山东省': [118, 36.15],
    '河南省': [113.65, 33.76],
    '湖北省': [114.31, 30.52],
    '湖南省': [110.8, 28.21],
    '广东省': [113.23, 23.16],
    '海南省': [109.511909, 18.852847],
    '四川省': [104.06, 30.67],
    '贵州省': [106.71, 26.57],
    '云南省': [102.72, 25.04],
    '陕西省': [108.95, 34.27],
    '甘肃省': [103.73, 36.03],
    '青海省': [97.74, 36.56],
    '台湾省': [121.5365, 25.0192],
    '内蒙古自治区': [111.65, 41.82],
    '广西壮族自治区': [108.33, 22.84],
    '西藏自治区': [91.11, 29.97],
    '宁夏回族自治区': [106.27, 38.47],
    '新疆维吾尔自治区': [87.68, 43.77],
    '香港特别行政区': [113.35, 22.14],
    '澳门特别行政区': [113.5, 22.2]
};
// 1366下 中国地图经纬度
const geoCoordMapSmall = {
    '北京市': [116.46, 40.92],
    '重庆市': [107.54, 29.59],
    '上海市': [121.48, 31.22],
    '天津市': [117.5, 39.13],
    '河北省': [114.48, 37.03],
    '山西省': [111.73, 37.87],
    '辽宁省': [122.18, 41.8],
    '吉林省': [125.35, 43.88],
    '黑龙江省': [127.63, 47.75],
    '江苏省': [120.18, 32.54],
    '浙江省': [120.19, 28.66],
    '安徽省': [117.27, 31.86],
    '福建省': [117.3, 25.28],
    '江西省': [115.89, 28.68],
    '山东省': [118, 35.55],
    '河南省': [113.65, 33.76],
    '湖北省': [114.31, 30.52],
    '湖南省': [110.8, 28.21],
    '广东省': [113.23, 23.16],
    '海南省': [109.511909, 18.852847],
    '四川省': [104.06, 30.67],
    '贵州省': [106.31, 25.57],
    '云南省': [102.72, 25.04],
    '陕西省': [108.95, 34.27],
    '甘肃省': [103.73, 34.63],
    '青海省': [97.74, 36.56],
    '台湾省': [121.5365, 25.0192],
    '内蒙古自治区': [111.65, 41.82],
    '广西壮族自治区': [108.33, 22.84],
    '西藏自治区': [91.11, 29.97],
    '宁夏回族自治区': [106.27, 38.47],
    '新疆维吾尔自治区': [87.68, 43.77],
    '香港特别行政区': [113.35, 22.14],
    '澳门特别行政区': [113.5, 22.2]
};

//重庆地图区县经纬度
var geoCoordMapOfCq = null
// 大屏下 重庆地图经纬度
var geoCoordMapOfCqBig = {
    '主城': [106.55, 29.57],
    '綦江': [106.65, 29.03],
    '长寿': [107.08, 29.87],
    '合川': [106.15, 30.12],
    '潼南': [105.83, 30.18],
    '铜梁': [106.05, 29.85],
    '壁山': [106.22, 29.60],
    '荣昌': [105.58, 29.40],
    '大足': [105.72, 29.70],
    '永川': [105.78, 29.23],
    '万盛': [106.92, 28.97],
    '城口': [108.67, 31.95],
    '开州': [108.42, 31.18],
    '巫溪': [109.63, 31.40],
    '巫山': [109.88, 31.08],
    '云阳': [108.97, 30.95],
    '忠县': [108.02, 30.30],
    '垫江': [107.35, 30.33],
    '奉节': [109.47, 31.02],
    '梁平': [107.80, 30.68],
    '彭水': [108.17, 29.30],
    '酉阳': [108.77, 28.85],
    '武隆': [107.75, 29.33],
    '秀山': [108.98, 28.45],
    '黔江': [108.77, 29.53],
    '涪陵': [107.40, 29.72],
    '石柱': [108.12, 30.00],
    '丰都': [107.73, 29.87],
    '北碚': [106.50, 29.90],
    '璧山': [106.22, 29.60],
    '渝北': [106.73, 29.92],
    '巴南': [106.78, 29.38],
    '南川': [107.15, 29.10],
    '江津': [106.16, 29.18],
    '万州': [108.40, 30.82],
};
// 1366下 重庆地图经纬度
var geoCoordMapOfCqSmall = {
    '主城': [106.55, 29.47],
    '綦江': [106.65, 28.83],
    '长寿': [107.18, 29.87],
    '合川': [106.35, 30.12],
    '潼南': [105.83, 30.18],
    '铜梁': [106.05, 29.85],
    '壁山': [106.22, 29.60],
    '荣昌': [105.48, 29.40],
    '大足': [105.72, 29.70],
    '永川': [105.78, 29.23],
    '万盛': [106.92, 28.97],
    '城口': [108.67, 31.95],
    '开州': [108.42, 31.18],
    '巫溪': [109.63, 31.40],
    '巫山': [109.88, 31.08],
    '云阳': [108.97, 30.95],
    '忠县': [108.02, 30.30],
    '垫江': [107.35, 30.33],
    '奉节': [109.47, 31.02],
    '梁平': [107.80, 30.68],
    '彭水': [108.17, 29.30],
    '酉阳': [108.77, 28.85],
    '武隆': [107.75, 29.33],
    '秀山': [108.98, 28.45],
    '黔江': [108.77, 29.53],
    '涪陵': [107.40, 29.72],
    '石柱': [108.32, 30.00],
    '丰都': [107.86, 29.87],
    '北碚': [106.50, 29.90],
    '璧山': [106.22, 29.60],
    '渝北': [106.83, 29.92],
    '巴南': [106.78, 29.38],
    '南川': [107.15, 29.10],
    '江津': [106.16, 29.18],
    '万州': [108.40, 30.62],
};

//地图插件 mapData:地图数据
function initChinaMap(mapData) {
    var mapData = mapData;

    if (!myChart) {
        myChart = echarts.init(document.getElementById('main'));
        // 点击省份功能
        myChart.on('click', function (params) {
            if (params.name == '重庆' || params.name == '重庆市') {
                // console.log("map重庆:" + params.data.name)
                showMapChina = false;
                getMapDate();
            }
        });
    }
    var mapOption = {
        backgroundColor: 'rgb(3,19,48)',
        title: {
            text: '放款额地域分布图',
            left: 'center',
            show: false,
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        // visualMap: {
        //     min: 0,
        //     max: 2500,
        //     left: 'left',
        //     top: 'bottom',
        //     text: ['高', '低'],           // 文本，默认为数值文本
        //     calculable: true
        // },
        geo: {
            map: 'china',
            label: {
                emphasis: {
                    show: false
                }
            },
            scaleLimit: [0, 0],
            zoom: 1.2,
            top: '9%',
            // 缩放和移动
            roam: false,
            aspectScale: 0.85,
            itemStyle: {
                normal: {
                    areaColor: '#063eba',
                    borderColor: '#031330'
                },
                emphasis: {
                    areaColor: '#6896FF'
                }
            }
        },
        series: [
            {
                name: '总交易额',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(geoCoordMap, mapData),

                symbolSize: function (val, params) {
                    // 根据数值大小展示不同，维度 （万）
                    var totalMoney = val[2] / 10000
                    if (totalMoney < 10000) {
                        return [3, 2];
                    } else if (totalMoney > 10000 && totalMoney < 100000) {
                        return [5, 3];
                    } else if (totalMoney > 100000 && totalMoney < 1000000) {
                        return [8, 5];
                    } else {
                        return [10, 7]
                    }
                    // return  parseInt(val[2] * 40);
                },
                //配置何时显示特效'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
                showEffectOn: 'render',
                //目前只有ripple这一种
                effectType: 'ripple',
                animation: true,
                rippleEffect: {
                    //动画的时间
                    period: 4,
                    //动画中波纹的最大缩放比例
                    scale: 8,
                    //波纹的绘制方式可选 'stroke' 和 'fill'
                    brushType: 'stroke'
                },
                //Scatter才有这个属性,是否开启鼠标 hover 的提示动画效果
                hoverAnimation: true,

                tooltip: {
                    formatter: function (params, ticket, callback) {
                        return params.seriesName + "<br>" + params.name + "：" + params.value[2];
                    },
                },
                label: {
                    normal: {
                        // 格式化省份名称，去除后缀
                        formatter: function (params, ticket, callback) {
                            var splitArray = ['特别行政区', '回族自治区', '壮族自治区', '维吾尔自治区', '自治区', '省', '市'];
                            var value = (params.value[2] / 10000).toFixed(0);
                            var name = params.name;
                            var lenth = splitArray.length;
                            for (var i = 0; i < lenth; i++) {
                                var index = name.indexOf(splitArray[i]);
                                if (index > 0) {
                                    name = name.substring(0, index);
                                }

                            }
                            return '{a|' + value + '}' + '\n\n' + '{b|' + name + '}';
                        },
                        rich: {
                            a: {
                                color: '#fff',
                                fontSize: 9,
                                fontWeight: 500
                            },
                            b: {
                                color: '#fff',
                                fontSize: 8,
                            },
                        },
                        fontSize: 14,
                        align: 'left',
                        position: 'left',
                        offset: [0, 0],
                        show: true
                    },
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        color: function (params) {
                            var level = params.data.level
                            // 0 无效
                            var colorList = ['#B5C334', '#50B3DA', '#7DD299', '#289DA3', '#F5B146'];
                            return colorList[level]
                        },
                        shadowBlur: 10,
                        shadowColor: '#ffffff',
                        position: ['50%', '50%'],
                    }
                }
            }
        ]
    };
    myChart.setOption(mapOption);
}

//重庆地图
function initCQMap(data) {
    var totalData = data;
    var cqMapData = [
        {name: '奉节', value: totalData * 0.065},
        {name: '巫溪', value: totalData * 0.045},
        {name: '开州', value: totalData * 0.0375},
        {name: '酉阳', value: totalData * 0.025},
        {name: '彭水', value: totalData * 0.035},
        {name: '云阳', value: totalData * 0.015},
        {name: '万州', value: totalData * 0.0015},
        {name: '城口', value: totalData * 0.008},
        {name: '江津', value: totalData * 0.012},
        {name: '石柱', value: totalData * 0.0035},
        {name: '巫山', value: totalData * 0.0004},
        {name: '涪陵', value: totalData * 0.0625},
        {name: '丰都', value: totalData * 0.0225},
        {name: '武隆', value: totalData * 0.0125},
        {name: '南川', value: totalData * 0.0172},
        {name: '秀山', value: totalData * 0.0228},
        {name: '黔江', value: totalData * 0.018},
        {name: '合川', value: totalData * 0.0039},
        {name: '綦江', value: totalData * 0.0022},
        {name: '忠县', value: totalData * 0.0013},
        {name: '梁平', value: totalData * 0.006},
        {name: '巴南', value: totalData * 0.01},
        {name: '潼南', value: totalData * 0.032},
        {name: '永川', value: totalData * 0.055},
        {name: '垫江', value: totalData * 0.018},
        {name: '渝北', value: totalData * 0.004},
        {name: '长寿', value: totalData * 0.05},
        {name: '大足', value: totalData * 0.02},
        {name: '铜梁', value: totalData * 0.0017},
        {name: '荣昌', value: totalData * 0.003},
        {name: '璧山', value: totalData * 0.0041},
        {name: '北碚', value: totalData * 0.007},
        {name: '万盛', value: totalData * 0.0006},
        {name: '主城', value: totalData * 0.1},
    ];
    if (!myChart) {
        myChart = echarts.init(document.getElementById('main'));
    }
    var mapOption = {
        backgroundColor: 'rgb(3,19,48)',
        title: {
            text: '放款额地域分布图',
            left: 'center',
            show: false,
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        geo: {
            map: '重庆',
            label: {
                emphasis: {
                    show: false
                }
            },
            scaleLimit: [0, 0],
            zoom: 1.2,
            top: '9%',
            roam: false,
            aspectScale: 0.85,
            itemStyle: {
                normal: {
                    areaColor: '#063eba',
                    borderColor: '#031330'
                },
                emphasis: {
                    areaColor: '#6896FF'
                }
            }
        },
        series: [
            {
                name: '销售额',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(geoCoordMapOfCq, cqMapData),

                symbolSize: function (val, params) {
                    // 根据数值大小展示不同，维度 （万）
                    var totalMoney = val[2] / 10000
                    if (totalMoney < 10000) {
                        return [3, 2];
                    } else if (totalMoney > 10000 && totalMoney < 100000) {
                        return [5, 3];
                    } else if (totalMoney > 100000 && totalMoney < 1000000) {
                        return [8, 5];
                    } else {
                        return [10, 7]
                    }
                    // return  parseInt(val[2] * 40);
                },
                //配置何时显示特效'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
                showEffectOn: 'render',
                //目前只有ripple这一种
                effectType: 'ripple',
                animation: true,
                rippleEffect: {
                    //动画的时间
                    period: 4,
                    //动画中波纹的最大缩放比例
                    scale: 8,
                    //波纹的绘制方式可选 'stroke' 和 'fill'
                    brushType: 'stroke'
                },
                //Scatter才有这个属性,是否开启鼠标 hover 的提示动画效果
                hoverAnimation: true,

                tooltip: {
                    formatter: function (params, ticket, callback) {
                        return params.seriesName + "<br>" + params.name + "：" + params.value[2];
                    },
                },
                label: {
                    normal: {
                        formatter: function (params, ticket, callback) {
                            var splitArray = ['特别行政区', '回族自治区', '壮族自治区', '维吾尔自治区', '自治区', '省', '市'];
                            var value = (params.value[2] / 10000).toFixed(0);
                            var name = params.name;
                            var lenth = splitArray.length;
                            for (var i = 0; i < lenth; i++) {
                                var index = name.indexOf(splitArray[i]);
                                if (index > 0) {
                                    name = name.substring(0, index);
                                }

                            }
                            return '{a|' + value + '}' + '\n\n' + '{b|' + name + '}';
                        },
                        rich: {
                            a: {
                                color: '#fff',
                                fontSize: 9,
                                fontWeight: 500
                            },
                            b: {
                                color: '#fff',
                                fontSize: 8,
                            },
                        },
                        fontSize: 14,
                        align: 'left',
                        position: 'left',
                        offset: [0, 0],
                        show: true
                    },
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#fff',
                        position: ['50%', '50%'],
                    }
                }
            }
        ]
    };
    myChart.setOption(mapOption);
}

//获取各省市交易数据
function getMapDate() {
    if (showMapChina == true) {
        levelArr = data.data.level;
        initChinaMap(loadDistribution)
    } else {
        initCQMap(loadDistribution['重庆市'])
    }
}

/**
 *  获取屏幕类型
 */
function getScreenType() {
    var screenWidth = Number.parseInt(window.innerWidth)
    var screenType = ''
    if(screenWidth >= 1280 && screenWidth < 1366) {
        screenType = 'screen1280'
    } else if(screenWidth >= 1366 && screenWidth < 1920) {
        screenType = 'screen1366'
    } else if(screenWidth >= 1920) {
        screenType = 'screen1920'
    } else {
        screenType = 'screen1280'
    }
    return screenType
}
$(function () {
    var screenType = getScreenType()
    console.log(screenType)
    // 设置地图大小
    switch (screenType) {
        case 'screen1280':
            $("#main").width(546)
            $("#main").height(385)
            geoCoordMap = geoCoordMapSmall
            geoCoordMapOfCq = geoCoordMapOfCqSmall
            break
        case 'screen1366':
            $("#main").width(583)
            $("#main").height(385)
            geoCoordMap = geoCoordMapSmall
            geoCoordMapOfCq = geoCoordMapOfCqSmall
            break
        case 'screen1920':
            $("#main").width(812)
            $("#main").height(550)
            geoCoordMap = geoCoordMapBig
            geoCoordMapOfCq = geoCoordMapOfCqBig
            break
    }
})