echarts实现地图（包括中国地图，省份地图，市地图）超详细代码

lixing123456
345 阅读5分钟
  • 先来截图看看效果 image.png

image.png

image.png

  • 首先我是在html中实现的，vue中同理
  • 这是完整代码
  • 里面用到两个文件，一个echarts.js，可以自行从网上下载，也可以联系我要，另一个是map.js，是我自己编写的js文件，里面存放地图相关的json经纬度数据，数据格式我在下面截图展示了，至于数据来源，可以从datav.aliyun.com/portal/scho… 网站里搜索并且粘贴，不会用的也可以联系我
  • 我是从网上复制了经纬度数据，然后在map.js里粘贴，这是一种省事，但是比较笨的办法，也可以直接下载对应的json文件，比如河北.json，然后放入项目本地，在页面中引入，然后直接使用文件，就不用复制那么多数据了，至于怎么使用json文件，请自行百度
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./echarts.js"></script>
<script src="./map.js"></script>
<style>
    .topDiv {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .halfDiv {
        width: 50%;
        height: 400px;
    }
</style>

<body>
    <div class="topDiv">
        <div class="halfDiv" id="a1"></div>
        <div class="halfDiv" id="a2"></div>
    </div>
    中国地图
    <div id="map0" style="width: 100%;height: 400px;"></div>
    <div class="topDiv">
        河北省，这是不包含子区域的
        <div class="halfDiv" id="map4"></div>
        河北省,这是包含子区域的
        <div class="halfDiv" id="map1"></div>
    </div>
    <div class="topDiv">
        唐山市，这是不包含子区域的
        <div class="halfDiv" id="map2"></div>
        唐山市，这是包含子区域的
        <div class="halfDiv" id="map3"></div>
    </div>
</body>
<script>

    // 基于准备好的dom，初始化echarts实例
    var a1 = echarts.init(document.getElementById('a1'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {
            // y轴刻度是否显示,默认显示
            // interval:false
            // y轴刻度，不设置的话，默认以最大的数据去自动分配合适的刻度
            interval: 15
        },
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [60, 20, 36, 50, 35, 50]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    a1.setOption(option);


    function randomData(param) {
        return Math.round(Math.random() * 500);
    }
    // 展示中国地图
    function showMap0() {
        var myChart = echarts.init(document.getElementById('map0'));
        var option = {
            title: {
                text: '各省份的总成交量对比',
                textStyle: { color: 'red' },
                x: 'left'
            },
            tooltip: {
                formatter: function (e) {
                    console.log(e);
                    var name = e.name ? e.name : '获取中';
                    var value = e.value ? e.value : '暂无数据'
                    return name + "：" + value;
                }
            },
            visualMap: {
                show: false,
                x: 'left',
                y: 'bottom',
                splitList: [
                    { start: 500, end: 600 }, { start: 400, end: 500 },
                    { start: 300, end: 400 }, { start: 200, end: 300 },
                    { start: 100, end: 200 }, { start: 0, end: 100 },
                ],
                color: ['#5bc2e7', '#6980c5', '#70dfdf', '#f7f1ee', '#3390FF']
            },
            series: [{
                type: 'map',
                mapType: 'china',
                roam: true,
                zoom: 1.5,
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data: [
                    { name: '北京市', value: 666 }, { 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() }
                ]
            }]
        };
        myChart.setOption(option);
    }
    echarts.registerMap('china', mapData.china);
    showMap0()


    // 展示省份地图,是包含子区域的
    function showMap4() {
        var myChart = echarts.init(document.getElementById('map4'));
        var option = {
            tooltip: {
                //                    show: false //不显示提示标签
                // formatter: '{b}', //提示标签格式
                backgroundColor: "#ff7f50",//提示标签背景颜色
                textStyle: { color: "#fff" }, //提示标签字体颜色
                formatter: function (params) {
                    let tipHtml = ''
                    tipHtml = '<div style="color: #fff;padding: 10px;">'
                        + '<div>' + params.name + '</div>'
                        + '<div>数量：' + (params.value ? params.value : 0) + '个</div>'
                        + '</div>';
                    return tipHtml;
                }
            },
            series: [{
                type: 'map',
                mapType: 'hebei',
                label: {
                    normal: {
                        show: true,//显示省份标签
                        textStyle: { color: "#c71585" }//省份标签字体颜色
                    },
                    emphasis: {//对应的鼠标悬浮效果
                        show: true,
                        textStyle: { color: "#800080" }
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: .5,//区域边框宽度
                        borderColor: '#009fe8',//区域边框颜色
                        areaColor: "#ffefd5",//区域颜色
                    },
                    emphasis: {
                        borderWidth: .5,
                        borderColor: '#4b0082',
                        areaColor: "#f47920",
                    }
                },
                data: [
                ]
            }],
        };

        myChart.setOption(option);
    }
    echarts.registerMap('hebei', mapData.hebei1);
    showMap4()

    // 展示省份地图,是包含子区域的
    function showMap() {
        var myChart = echarts.init(document.getElementById('map1'));
        var option = {
            tooltip: {
                backgroundColor: "#ff7f50",//提示标签背景颜色
                textStyle: { color: "#fff" }, //提示标签字体颜色
                formatter: function (params) {
                    let tipHtml = ''
                    tipHtml = '<div style="color: #fff;padding: 10px;">'
                        + '<div>' + params.name + '</div>'
                        + '<div>数量：' + (params.value ? params.value : 0) + '个</div>'
                        + '</div>';
                    return tipHtml;
                }
            },
            series: [{
                type: 'map',
                mapType: 'hebei',
                label: {
                    normal: {
                        show: true,//显示省份标签
                        textStyle: { color: "#c71585" }//省份标签字体颜色
                    },
                    emphasis: {//对应的鼠标悬浮效果
                        show: true,
                        textStyle: { color: "#800080" }
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: .5,//区域边框宽度
                        borderColor: '#009fe8',//区域边框颜色
                        areaColor: "#ffefd5",//区域颜色
                    },
                    emphasis: {
                        borderWidth: .5,
                        borderColor: '#4b0082',
                        areaColor: "#f47920",
                    }
                },
                data: [
                    { name: '唐山市', selected: true, value: '6666' },
                ]
            }],
        };

        myChart.setOption(option);
    }
    echarts.registerMap('hebei', mapData.hebei);
    showMap()

    // 展示市区地图，这是不包含子区域的
    function showMap1() {
        var myChart = echarts.init(document.getElementById('map2'));
        var option = {
            tooltip: {
                backgroundColor: "#ff7f50",//提示标签背景颜色
                textStyle: { color: "#fff" }, //提示标签字体颜色
                formatter: function (params) {
                    let tipHtml = ''
                    tipHtml = '<div style="color: #fff;padding: 10px;">'
                        + '<div>' + params.name + '</div>'
                        + '<div>数量：' + (params.value ? params.value : 0) + '个</div>'
                        + '</div>';
                    return tipHtml;
                }
            },
            series: [{
                type: 'map',
                mapType: 'tangshan',
                label: {
                    normal: {
                        show: true,//显示省份标签
                        textStyle: { color: "#c71585" }//省份标签字体颜色
                    },
                    emphasis: {//对应的鼠标悬浮效果
                        show: true,
                        textStyle: { color: "#800080" }
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: .5,//区域边框宽度
                        borderColor: '#009fe8',//区域边框颜色
                        areaColor: "#ffefd5",//区域颜色
                    },
                    emphasis: {
                        borderWidth: .5,
                        borderColor: '#4b0082',
                        areaColor: "#f47920",
                    }
                },
                data: [
                ]
            }],
        };

        myChart.setOption(option);
    }
    echarts.registerMap('tangshan', mapData.tangshan);
    showMap1()

    // 展示市区地图，这是包含子区域的
    function showMap2() {
        var myChart = echarts.init(document.getElementById('map3'));
        var option = {
            tooltip: {
                backgroundColor: "#ff7f50",//提示标签背景颜色
                textStyle: { color: "#fff" }, //提示标签字体颜色
                formatter: function (params) {
                    let tipHtml = ''
                    tipHtml = '<div style="color: #fff;padding: 10px;">'
                        + '<div>' + params.name + '</div>'
                        + '<div>数量：' + (params.value ? params.value : 0) + '个</div>'
                        + '</div>';
                    return tipHtml;
                }
            },
            series: [{
                type: 'map',
                mapType: 'tangshan',
                label: {
                    normal: {
                        show: true,//显示省份标签
                        textStyle: { color: "#c71585" }//省份标签字体颜色
                    },
                    emphasis: {//对应的鼠标悬浮效果
                        show: true,
                        textStyle: { color: "#800080" }
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: .5,//区域边框宽度
                        borderColor: '#009fe8',//区域边框颜色
                        areaColor: "#ffefd5",//区域颜色
                    },
                    emphasis: {
                        borderWidth: .5,
                        borderColor: '#4b0082',
                        areaColor: "#f47920",
                    }
                },
                data: [
                    { name: '玉田县', selected: true, value: '6666' },//广西为选中状态
                ]
            }],
        };

        myChart.setOption(option);
    }
    echarts.registerMap('tangshan', mapData.tangshan1);
    showMap2()
</script>

</html>
  • image.png
  • image.png

image.png

avatar
文章
阅读
粉丝