案例

新手必看！轻松上手ECharts地图图表制作：20个实用案例解析

2026-11-02 0 阅读

ECharts是一个使用JavaScript实现的开源可视化库，它能够帮助用户在网页上轻松创建交互式图表。地图图表是ECharts中的一个重要功能，它可以展示地理分布、区域对比等信息。对于新手来说，学习地图图表的制作可能会感到有些困难，但别担心，今天我就为大家带来了20个实用案例，帮助你轻松上手ECharts地图图表制作。

案例一：中国地图

首先，我们从最基础的案例开始。创建一个中国地图图表，需要以下几个步骤：

  1. 引入ECharts地图模块。
  2. 定义地图数据。
  3. 初始化地图实例。
  4. 设置图表的配置项。
// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china'
        // ...
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例二：全球地图

创建全球地图图表的方法与创建中国地图类似，只是需要引入world地图数据。

// 引入世界地图数据
require('echarts/map/js/world');
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球地图'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'world'
        // ...
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例三：区域统计图

在地图上展示不同区域的统计数据，可以通过为每个区域设置颜色和数值来实现。

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '区域统计图'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '广东', value: 1200},
            {name: '江苏', value: 900},
            // ...
        ]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例四：热力图

热力图可以展示地图上每个区域的数值大小，非常适合展示人口密度、气温分布等信息。

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '热力图'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46,39.92,300]},
            {name: '上海', value: [121.47,31.23,400]},
            // ...
        ]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例五：动态地图

动态地图可以展示随时间变化的地理信息，例如城市人口变化、交通流量等。

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '动态地图'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china',
        data: [
            // ...
        ],
        animation: true
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例六：多地图组合

在同一个图表中展示多个地图，可以更直观地比较不同区域的地理信息。

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '多地图组合'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china',
        // ...
    }, {
        type: 'map',
        map: 'world',
        // ...
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例七：自定义地图

如果你需要展示特定的区域，可以自定义地图数据。

// 自定义地图数据
var mapData = {
    'name': '自定义地图',
    'type': 'FeatureCollection',
    'features': [
        // ...
    ]
};

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '自定义地图'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: '自定义地图',
        // ...
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例八：区域交互

为地图添加交互效果，例如点击区域显示详细信息。

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '区域交互'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china',
        // ...
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 为地图添加点击事件
myChart.on('click', function (params) {
    // params.name为区域名称
    console.log(params.name);
});

案例九：地图动画

为地图添加动画效果，例如地图淡入淡出。

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图动画'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china',
        animation: true
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例十：地图缩放与平移

为地图添加缩放和平移功能，方便用户查看不同区域的细节。

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图缩放与平移'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china',
        // ...
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 添加缩放与平移事件
myChart.on('click', function (params) {
    myChart.dispatchAction({
        type: 'zoomIn'
    });
});

案例十一：地图标记

在地图上添加标记，可以突出显示特定区域。

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图标记'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china',
        // ...
        markPoint: {
            data: [
                {name: '北京', value: [116.46,39.92]}
                // ...
            ]
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例十二：地图渐变效果

为地图添加渐变效果，可以增强地图的可视化效果。

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图渐变效果'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china',
        // ...
        itemStyle: {
            areaColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#0f378a' // 0% 处的颜色
                }, {
                    offset: 1, color: '#000' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
            }
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例十三：地图阴影效果

为地图添加阴影效果，可以使地图看起来更加立体。

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图阴影效果'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china',
        // ...
        itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(120, 36, 50, 0.5)',
            shadowOffsetY: 5
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例十四：地图标签

在地图上添加标签，可以显示更详细的地理信息。

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图标签'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china',
        // ...
        label: {
            show: true,
            formatter: '{b}'
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例十五：地图缩略图

在地图右侧添加缩略图，方便用户快速查看地图的整体布局。

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图缩略图'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china',
        // ...
        visualMap: {
            show: false,
            min: 0,
            max: 100,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],           // 文本，默认为数值文本
            calculable: true
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例十六：地图数据筛选

通过筛选地图数据，只展示符合条件的区域。

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图数据筛选'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china',
        // ...
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 50},
            // ...
        ]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 为地图添加筛选事件
myChart.on('click', function (params) {
    if (params.name === '北京') {
        myChart.setOption({
            series: [{
                data: [{name: '北京', value: 100}]
            }]
        });
    }
});

案例十七：地图层级切换

在地图上切换不同层级的数据，例如国家、省份、城市等。

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图层级切换'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china',
        // ...
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 为地图添加层级切换事件
myChart.on('click', function (params) {
    if (params.name === '北京') {
        myChart.setOption({
            series: [{
                type: 'map',
                map: 'beijing',
                // ...
            }]
        });
    }
});

案例十八：地图数据聚合

将地图上相邻的多个区域合并为一个区域，以便更清晰地展示数据。

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图数据聚合'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china',
        // ...
        data: [
            {name: '北京', value: 100},
            {name: '天津', value: 50},
            // ...
        ],
        // ...
        label: {
            show: true,
            formatter: '{b}'
        },
        // ...
        emphasis: {
            label: {
                show: true
            }
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例十九：地图标签动画

为地图标签添加动画效果，使地图更具有动态感。

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图标签动画'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china',
        // ...
        label: {
            show: true,
            formatter: '{b}',
            animate: true
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例二十：地图点击事件

为地图添加点击事件，当用户点击某个区域时，可以执行特定的操作。

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图点击事件'
    },
    tooltip: {
        trigger: 'item'
    },
    // ...
    series: [{
        type: 'map',
        map: 'china',
        // ...
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 为地图添加点击事件
myChart.on('click', function (params) {
    if (params.name === '北京') {
        alert('北京');
    }
});

以上就是20个ECharts地图图表制作实用案例，希望对你有所帮助。在实际应用中，你可以根据需要调整案例中的代码，以适应不同的场景。祝你在地图图表制作的道路上越走越远！

分享到：
上一篇 全球企业败走麦城：揭秘十大国际市场失利背后的真相
下一篇 焦作车主改装斯柯达速派，揭秘个性化升级全过程

相关文章

全球企业败走麦城：揭秘十大国际市场失利背后的真相
2026-11-02
焦作车主巧手改装博越，揭秘个性升级秘诀与实用技巧
2026-11-02
焦作车主改装斯柯达速派，揭秘个性化升级全过程
2026-11-02
焦作市创新实践：多领域典型案例解析与启示
2026-11-02