新手必学：轻松掌握ECharts地图图表制作技巧，10个实用案例让你快速上手！

ECharts地图图表是一种非常直观的数据展示方式，它能够将地理信息与数据统计完美结合，让用户一目了然地了解数据的分布情况。对于新手来说，掌握ECharts地图图表的制作技巧至关重要。下面，我将通过10个实用案例，带你轻松上手ECharts地图图表的制作。

案例一：中国地图图表

步骤一：引入ECharts和地图数据

首先，我们需要引入ECharts库和对应的地图数据。这里以中国地图为例，可以使用ECharts内置的中国地图数据。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>

步骤二：初始化地图图表

接下来，我们需要在HTML中创建一个容器，用于展示地图图表。

<div id="main" style="width: 600px;height:400px;"></div>

步骤三：配置地图图表

最后，我们需要配置地图图表的选项。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '中国地图图表'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京',value: Math.round(Math.random() * 1000)},
                {name: '上海',value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

案例二：世界地图图表

步骤一：引入ECharts和世界地图数据

与世界地图相关的数据较多，这里我们使用ECharts内置的世界地图数据。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/world.js"></script>

步骤二：初始化地图图表

与世界地图相关的步骤与案例一类似，这里不再赘述。

步骤三：配置地图图表

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '世界地图图表'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '中国',value: Math.round(Math.random() * 1000)},
                {name: '美国',value: Math.round(Math.random() * 1000)},
                // ... 其他国家
            ]
        }
    ]
};

myChart.setOption(option);

案例三：省份地图图表

步骤一：引入ECharts和省份地图数据

省份地图数据可以通过在线API获取，这里以河南省为例。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/province/henan.js"></script>

步骤二：初始化地图图表

与世界地图相关的步骤与案例一类似，这里不再赘述。

步骤三：配置地图图表

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '河南省地图图表'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '河南省',
            type: 'map',
            mapType: 'henan',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '郑州市',value: Math.round(Math.random() * 1000)},
                {name: '洛阳市',value: Math.round(Math.random() * 1000)},
                // ... 其他城市
            ]
        }
    ]
};

myChart.setOption(option);

案例四：行政区划地图图表

步骤一：引入ECharts和行政区划数据

行政区划数据可以通过在线API获取，这里以郑州市为例。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/city/chengdu.js"></script>

步骤二：初始化地图图表

与世界地图相关的步骤与案例一类似，这里不再赘述。

步骤三：配置地图图表

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '郑州市行政区划地图图表'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '郑州市',
            type: 'map',
            mapType: 'chengdu',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '金水区',value: Math.round(Math.random() * 1000)},
                {name: '二七区',value: Math.round(Math.random() * 1000)},
                // ... 其他区域
            ]
        }
    ]
};

myChart.setOption(option);

案例五：多级地图图表

步骤一：引入ECharts和地图数据

多级地图数据可以通过在线API获取，这里以河南省为例。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/province/henan.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/city/chengdu.js"></script>

步骤二：初始化地图图表

与世界地图相关的步骤与案例一类似，这里不再赘述。

步骤三：配置地图图表

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '河南省多级地图图表'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '河南省',
            type: 'map',
            mapType: 'henan',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '郑州市',value: Math.round(Math.random() * 1000)},
                {name: '洛阳市',value: Math.round(Math.random() * 1000)},
                // ... 其他城市
            ]
        },
        {
            name: '郑州市',
            type: 'map',
            mapType: 'chengdu',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '金水区',value: Math.round(Math.random() * 1000)},
                {name: '二七区',value: Math.round(Math.random() * 1000)},
                // ... 其他区域
            ]
        }
    ]
};

myChart.setOption(option);

案例六：散点地图图表

步骤一：引入ECharts和地图数据

散点地图数据可以通过在线API获取，这里以河南省为例。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>

步骤二：初始化地图图表

与世界地图相关的步骤与案例一类似，这里不再赘述。

步骤三：配置地图图表

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '河南省散点地图图表'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '河南省',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '郑州市',value: Math.round(Math.random() * 1000)},
                {name: '洛阳市',value: Math.round(Math.random() * 1000)},
                // ... 其他城市
            ]
        },
        {
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
                {name: '郑州市',value: [113.65,34.76]},
                {name: '洛阳市',value: [112.54,34.07]},
                // ... 其他城市
            ]
        }
    ]
};

myChart.setOption(option);

案例七：热力地图图表

步骤一：引入ECharts和地图数据

热力地图数据可以通过在线API获取，这里以河南省为例。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>

步骤二：初始化地图图表

与世界地图相关的步骤与案例一类似，这里不再赘述。

步骤三：配置地图图表

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '河南省热力地图图表'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '河南省',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '郑州市',value: Math.round(Math.random() * 1000)},
                {name: '洛阳市',value: Math.round(Math.random() * 1000)},
                // ... 其他城市
            ]
        },
        {
            name: '热力',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                {name: '郑州市',value: [113.65,34.76]},
                {name: '洛阳市',value: [112.54,34.07]},
                // ... 其他城市
            ]
        }
    ]
};

myChart.setOption(option);

案例八：自定义地图图表

步骤一：引入ECharts和自定义地图数据

自定义地图数据可以通过在线API获取，这里以河南省为例。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>

步骤二：初始化地图图表

与世界地图相关的步骤与案例一类似，这里不再赘述。

步骤三：配置地图图表

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '河南省自定义地图图表'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '河南省',
            type: 'map',
            mapType: 'henan',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '郑州市',value: Math.round(Math.random() * 1000)},
                {name: '洛阳市',value: Math.round(Math.random() * 1000)},
                // ... 其他城市
            ]
        }
    ]
};

myChart.setOption(option);

案例九：地图动画效果

步骤一：引入ECharts和地图数据

与世界地图相关的步骤与案例一类似，这里不再赘述。

步骤二：初始化地图图表

与世界地图相关的步骤与案例一类似，这里不再赘述。

步骤三：配置地图图表

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '世界地图动画效果'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '中国',value: Math.round(Math.random() * 1000)},
                {name: '美国',value: Math.round(Math.random() * 1000)},
                // ... 其他国家
            ]
        }
    ]
};

myChart.setOption(option);

// 动画效果
setInterval(function () {
    option.series[0].data = option.series[0].data.map(function (item) {
        if (item.name === '中国') {
            item.value = Math.round(Math.random() * 1000);
        }
        return item;
    });
    myChart.setOption(option);
}, 1000);

案例十：地图交互效果

步骤一：引入ECharts和地图数据

与世界地图相关的步骤与案例一类似，这里不再赘述。

步骤二：初始化地图图表

与世界地图相关的步骤与案例一类似，这里不再赘述。

步骤三：配置地图图表

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '世界地图交互效果'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '中国',value: Math.round(Math.random() * 1000)},
                {name: '美国',value: Math.round(Math.random() * 1000)},
                // ... 其他国家
            ]
        }
    ]
};

myChart.setOption(option);

// 交互效果
myChart.on('click', function (params) {
    if (params.componentType === 'series') {
        alert(params.name + '：' + params.value);
    }
});

通过以上10个案例，相信你已经对ECharts地图图表的制作技巧有了初步的了解。在实际应用中，你可以根据自己的需求，灵活运用这些技巧，制作出各种美观、实用的地图图表。祝你学习愉快！