案例

新手必看！轻松掌握echarts地图图表制作，20个实用案例带你飞

2026-10-16 0 阅读

在数据可视化领域，ECharts 地图图表因其强大的功能和易用性而备受青睐。无论是展示地理分布数据，还是进行区域比较分析，ECharts 地图图表都能提供直观、生动的视觉效果。对于新手来说，掌握 ECharts 地图图表制作可能需要一些时间和耐心，但别担心，今天我将带你通过 20 个实用案例，轻松掌握 ECharts 地图图表的制作技巧。

案例一：中国地图基础展示

首先，让我们从最基础的中国地图展示开始。以下是一个简单的 ECharts 地图图表制作步骤：

  1. 引入 ECharts 库和地图数据。
  2. 创建一个地图图表实例。
  3. 设置地图的基本参数。
  4. 使用 setOption 方法添加地图系列。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图基础展示'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1
        }]
    }]
};

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

案例二：全球地图展示

接下来，我们来看看如何制作一个全球地图展示。步骤与制作中国地图类似，只需更换地图数据即可。

// 引入世界地图数据
require('echarts/map/js/world');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球地图展示'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '世界',
        type: 'map',
        mapType: 'world',
        label: {
            show: true
        },
        data: [{
            name: '中国',
            value: 1
        }]
    }]
};

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

案例三：热力图展示

热力图是地图图表中非常实用的一种类型，可以用来展示某个区域的密集程度或温度分布。

// 引入热力图数据
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国热力图展示'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1
        }]
    }]
};

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

案例四：区域点击事件

在地图图表中，我们还可以为各个区域设置点击事件，以实现交互功能。

// ...（其他代码保持不变）

// 添加点击事件
myChart.on('click', function (params) {
    console.log(params.name + ' 被点击了！');
});

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

案例五：自定义地图

除了使用 ECharts 内置的地图数据外，我们还可以自定义地图，例如添加新的区域、修改区域颜色等。

// ...（其他代码保持不变）

// 自定义地图数据
var mapData = {
    features: [
        // ...（添加或修改区域数据）
    ]
};

// 使用自定义地图数据
myChart.setOption({
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'custom',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1
        }]
    }]
});

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

案例六：地图缩放和旋转

ECharts 地图图表支持缩放和旋转功能，方便用户查看不同区域的细节。

// ...（其他代码保持不变）

// 添加缩放和旋转控件
myChart.setOption({
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    geo: {
        viewControl: {
            enable: true,
            zoom: 1.2,
            rotate: 30
        }
    }
});

案例七：区域渐变效果

ECharts 地图图表支持为区域添加渐变效果，使图表更加生动。

// ...（其他代码保持不变）

// 添加渐变效果
myChart.setOption({
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1
        }],
        itemStyle: {
            areaColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'red' // 0% 处的颜色
                }, {
                    offset: 1, color: 'blue' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
            }
        }
    }]
});

案例八：地图动画效果

ECharts 地图图表支持添加动画效果，使图表更具吸引力。

// ...（其他代码保持不变）

// 添加动画效果
myChart.setOption({
    animation: true,
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1
        }],
        itemStyle: {
            emphasis: {
                label: {
                    show: true
                }
            }
        }
    }]
});

案例九：多层级地图

在 ECharts 地图中，我们可以创建多层级地图，展示不同级别的区域数据。

// ...（其他代码保持不变）

// 添加多层级地图
myChart.setOption({
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1
        }],
        children: [{
            name: '北京市',
            type: 'map',
            mapType: 'beijing',
            label: {
                show: true
            },
            data: [{
                name: '东城区',
                value: 1
            }]
        }]
    }]
});

案例十：地图点击事件回调

ECharts 地图图表支持为区域点击事件添加回调函数，用于处理点击事件后的逻辑。

// ...（其他代码保持不变）

// 添加点击事件回调
myChart.on('click', function (params) {
    console.log(params.name + ' 被点击了！');
    // ...（处理点击事件后的逻辑）
});

案例十一：地图数据动态更新

ECharts 地图图表支持动态更新地图数据，以展示实时数据。

// ...（其他代码保持不变）

// 更新地图数据
myChart.setOption({
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1
        }]
    }]
});

案例十二：地图与折线图结合

ECharts 地图图表可以与其他图表类型结合，例如折线图，展示多维度数据。

// ...（其他代码保持不变）

// 添加折线图
myChart.setOption({
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1
        }],
        children: [{
            name: '北京市',
            type: 'line',
            data: [{
                name: '东城区',
                value: 1
            }]
        }]
    }]
});

案例十三：地图与饼图结合

ECharts 地图图表也可以与饼图结合，展示区域内部数据。

// ...（其他代码保持不变）

// 添加饼图
myChart.setOption({
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1
        }],
        children: [{
            name: '北京市',
            type: 'pie',
            data: [{
                name: '东城区',
                value: 1
            }]
        }]
    }]
});

案例十四：地图与散点图结合

ECharts 地图图表可以与散点图结合，展示区域内的数据分布。

// ...（其他代码保持不变）

// 添加散点图
myChart.setOption({
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1
        }],
        children: [{
            name: '北京市',
            type: 'scatter',
            data: [{
                name: '东城区',
                value: [116.405285, 39.904989]
            }]
        }]
    }]
});

案例十五：地图与柱状图结合

ECharts 地图图表可以与柱状图结合，展示区域内的数据对比。

// ...（其他代码保持不变）

// 添加柱状图
myChart.setOption({
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1
        }],
        children: [{
            name: '北京市',
            type: 'bar',
            data: [{
                name: '东城区',
                value: 1
            }]
        }]
    }]
});

案例十六：地图与地图结合

ECharts 地图图表可以嵌套其他地图，展示不同区域的数据。

// ...（其他代码保持不变）

// 嵌套地图
myChart.setOption({
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1
        }],
        children: [{
            name: '北京市',
            type: 'map',
            mapType: 'beijing',
            label: {
                show: true
            },
            data: [{
                name: '东城区',
                value: 1
            }]
        }]
    }]
});

案例十七：地图与混合图表结合

ECharts 地图图表可以与其他图表类型结合，形成混合图表，展示更丰富的数据。

// ...（其他代码保持不变）

// 添加混合图表
myChart.setOption({
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1
        }],
        children: [{
            name: '北京市',
            type: 'pie',
            data: [{
                name: '东城区',
                value: 1
            }]
        }]
    }]
});

案例十八：地图与自定义标签结合

ECharts 地图图表支持自定义标签，展示更丰富的信息。

// ...（其他代码保持不变）

// 添加自定义标签
myChart.setOption({
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1
        }],
        children: [{
            name: '北京市',
            type: 'text',
            data: [{
                name: '东城区',
                value: '东城区'
            }]
        }]
    }]
});

案例十九：地图与自定义形状结合

ECharts 地图图表支持自定义形状，展示更独特的视觉效果。

// ...（其他代码保持不变）

// 添加自定义形状
myChart.setOption({
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1
        }],
        children: [{
            name: '北京市',
            type: 'customShape',
            data: [{
                name: '东城区',
                shape: 'circle'
            }]
        }]
    }]
});

案例二十：地图与自定义动画结合

ECharts 地图图表支持自定义动画，展示更生动的视觉效果。

// ...（其他代码保持不变）

// 添加自定义动画
myChart.setOption({
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1
        }],
        children: [{
            name: '北京市',
            type: 'customAnimation',
            data: [{
                name: '东城区',
                animation: 'fade'
            }]
        }]
    }]
});

通过以上 20 个实用案例，相信你已经对 ECharts 地图图表制作有了更深入的了解。希望这些案例能帮助你轻松掌握 ECharts 地图图表的制作技巧，为你的数据可视化项目增添更多亮点。

分享到：
上一篇 四川PVC电梯门套应用解析：经典案例与施工技巧详解
下一篇 孩子犯错家长如何应对：协商无效，起诉案例分析及应对策略