案例

新手必学！轻松掌握echarts地图图表制作：10个实用案例教你绘制中国省市地图

2026-11-04 0 阅读

案例一：基础中国地图绘制

简介

ECharts地图图表是一种非常直观的数据展示方式，它可以帮助我们快速地了解地理分布和空间关系。本案例将教你如何使用ECharts绘制一个基础的中国地图。

步骤

  1. 引入ECharts库和地图数据。
  2. 初始化地图实例。
  3. 添加中国地图。
  4. 设置地图的配置项。

代码示例

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

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

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

案例二：省市地图交互

简介

在ECharts中，我们可以通过点击地图上的省市来查看更多详细信息。本案例将展示如何实现省市地图的交互功能。

步骤

  1. 引入ECharts库和地图数据。
  2. 初始化地图实例。
  3. 添加中国地图。
  4. 设置地图的配置项，包括点击事件处理。

代码示例

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国省市地图交互'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

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

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

案例三：自定义地图样式

简介

ECharts允许我们自定义地图的样式，包括颜色、边框等。本案例将展示如何自定义中国地图的样式。

步骤

  1. 引入ECharts库和地图数据。
  2. 初始化地图实例。
  3. 添加中国地图。
  4. 设置地图的配置项，包括自定义样式。

代码示例

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '自定义中国地图样式'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

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

案例四：添加数据标签

简介

在地图图表中添加数据标签可以帮助我们更直观地了解数据。本案例将展示如何在ECharts地图中添加数据标签。

步骤

  1. 引入ECharts库和地图数据。
  2. 初始化地图实例。
  3. 添加中国地图。
  4. 设置地图的配置项，包括数据标签。

代码示例

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图数据标签'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

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

案例五：动态更新数据

简介

在ECharts中，我们可以动态地更新地图上的数据。本案例将展示如何实现动态更新中国地图的数据。

步骤

  1. 引入ECharts库和地图数据。
  2. 初始化地图实例。
  3. 添加中国地图。
  4. 设置地图的配置项，包括数据更新。

代码示例

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '动态更新中国地图数据'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

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

// 动态更新数据
setInterval(function () {
    var data = [];
    for (var i = 0; i < 100; i++) {
        data.push({
            name: Math.random().toString(36).substr(2),
            value: Math.round(Math.random() * 1000)
        });
    }
    myChart.setOption({
        series: [{
            data: data
        }]
    });
}, 2000);

案例六：多地图叠加

简介

ECharts允许我们在一个图表中叠加多个地图。本案例将展示如何实现多地图叠加。

步骤

  1. 引入ECharts库和地图数据。
  2. 初始化地图实例。
  3. 添加多个中国地图。
  4. 设置地图的配置项，包括叠加。

代码示例

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '多地图叠加'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }, {
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        data: [{
            name: '上海',
            value: 200
        }]
    }]
};

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

案例七：地图热力图

简介

热力图是一种通过颜色深浅来表示数据密集度的图表。本案例将展示如何使用ECharts绘制中国地图的热力图。

步骤

  1. 引入ECharts库和地图数据。
  2. 初始化地图实例。
  3. 添加中国地图。
  4. 设置地图的配置项，包括热力图。

代码示例

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图热力图'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

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

案例八：地图渐变效果

简介

ECharts允许我们为地图添加渐变效果，使地图更加生动。本案例将展示如何实现地图渐变效果。

步骤

  1. 引入ECharts库和地图数据。
  2. 初始化地图实例。
  3. 添加中国地图。
  4. 设置地图的配置项，包括渐变效果。

代码示例

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图渐变效果'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#323c48' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#2a333d' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                },
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

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

案例九：地图动画效果

简介

ECharts允许我们为地图添加动画效果，使地图更加生动。本案例将展示如何实现地图动画效果。

步骤

  1. 引入ECharts库和地图数据。
  2. 初始化地图实例。
  3. 添加中国地图。
  4. 设置地图的配置项，包括动画效果。

代码示例

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图动画效果'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

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

案例十：地图数据筛选

简介

在ECharts中，我们可以根据条件筛选地图上的数据。本案例将展示如何实现地图数据筛选。

步骤

  1. 引入ECharts库和地图数据。
  2. 初始化地图实例。
  3. 添加中国地图。
  4. 设置地图的配置项，包括数据筛选。

代码示例

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图数据筛选'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

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

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

通过以上10个实用案例，相信你已经能够轻松掌握ECharts地图图表的制作了。在实际应用中，你可以根据自己的需求对地图进行各种自定义和扩展。祝你学习愉快！

分享到：
上一篇 揭秘TensorFlow：从入门到实战，看这些创意无限的应用案例！
下一篇 如何用有效沟通挽留新员工：实战案例分析及策略指南

相关文章

揭秘TensorFlow：从入门到实战，看这些创意无限的应用案例！
2026-11-04
AlmaLinux助企业轻松上云：项目实战，优化成本与性能全攻略
2026-11-04
如何用有效沟通挽留新员工：实战案例分析及策略指南
2026-11-04
捆绑销售陷阱揭秘：这些商品千万别买！真实案例教你避开消费陷阱
2026-11-04