案例

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

2026-08-20 0 阅读

ECharts 是一个使用 JavaScript 实现的开源可视化库，它能够提供多种图表类型，包括地图图表。地图图表在数据可视化中非常有用，可以帮助我们直观地展示地理分布数据。对于新手来说，ECharts 地图图表的学习可能会有些门槛，但不用担心，本文将为你提供10个实用案例，让你轻松掌握ECharts地图图表的制作。

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

  1. 准备工作：首先，你需要引入ECharts库和地图数据文件。
  2. 代码示例：
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图基础展示'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            // ... 其他省份数据
        ]
    }]
};

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

案例二：世界地图基础展示

  1. 准备工作：引入ECharts库和世界地图数据文件。
  2. 代码示例：
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '世界地图基础展示'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '世界',
        type: 'map',
        mapType: 'world',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: 'China', value: Math.round(Math.random() * 1000)},
            // ... 其他国家数据
        ]
    }]
};

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

案例三：热力图展示

  1. 准备工作：引入ECharts库和热力图数据文件。
  2. 代码示例：
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '热力图展示'
    },
    tooltip: {
        trigger: 'item',
        formatter: function(params) {
            return params.name + '：' + params.value;
        }
    },
    series: [{
        name: '热力图',
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, 100]},
            // ... 其他数据
        ],
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: true
            }
        },
        itemStyle: {
            color: 'yellowgreen'
        }
    }]
};

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

案例四：地图点击事件

  1. 准备工作：引入ECharts库和地图数据文件。
  2. 代码示例：
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图点击事件'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '北京', value: 100},
            // ... 其他省份数据
        ],
        itemStyle: {
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        // 添加点击事件
        onEvent: function(params) {
            if (params.event === 'click') {
                alert(params.name);
            }
        }
    }]
};

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

案例五：地图缩放控制

  1. 准备工作：引入ECharts库和地图数据文件。
  2. 代码示例：
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图缩放控制'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '北京', value: 100},
            // ... 其他省份数据
        ],
        // 添加缩放控制
        zoom: {
            show: true,
            type: 'inside',
            start: 1,
            end: 5
        }
    }]
};

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

案例六：地图动画效果

  1. 准备工作：引入ECharts库和地图数据文件。
  2. 代码示例：
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图动画效果'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '北京', value: 100},
            // ... 其他省份数据
        ],
        // 添加动画效果
        animationDuration: 1000,
        animationEasing: 'cubicInOut'
    }]
};

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

案例七：地图自定义标签

  1. 准备工作：引入ECharts库和地图数据文件。
  2. 代码示例：
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图自定义标签'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            formatter: function(params) {
                return params.name + '（人口：' + params.value + '万）';
            }
        },
        data: [
            {name: '北京', value: 2000},
            // ... 其他省份数据
        ]
    }]
};

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

案例八：地图多个系列

  1. 准备工作：引入ECharts库和地图数据文件。
  2. 代码示例：
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图多个系列'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['系列1', '系列2']
    },
    series: [{
        name: '系列1',
        type: 'pie',
        radius: '50%',
        center: ['40%', '50%'],
        data: [
            {value: 335, name: '北京'},
            // ... 其他省份数据
        ],
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }, {
        name: '系列2',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['60%', '50%'],
        data: [
            {value: 310, name: '上海'},
            // ... 其他省份数据
        ],
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

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

案例九：地图数据动态更新

  1. 准备工作：引入ECharts库和地图数据文件。
  2. 代码示例：
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图数据动态更新'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '北京', value: 100},
            // ... 其他省份数据
        ]
    }]
};

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

// 动态更新数据
function updateData() {
    var newData = [
        {name: '北京', value: Math.round(Math.random() * 1000)},
        // ... 其他省份数据
    ];
    myChart.setOption({
        series: [{
            data: newData
        }]
    });
}

// 每隔3秒更新一次数据
setInterval(updateData, 3000);

案例十：地图交互式组件

  1. 准备工作：引入ECharts库和地图数据文件。
  2. 代码示例：
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图交互式组件'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '北京', value: 100},
            // ... 其他省份数据
        ],
        // 添加交互式组件
        markPoint: {
            symbolSize: 50,
            data: [
                {name: '北京', value: 100},
                // ... 其他数据
            ]
        }
    }]
};

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

通过以上10个实用案例，相信你已经对ECharts地图图表的制作有了初步的了解。在实际应用中，你可以根据自己的需求对案例进行修改和扩展，创造出更多具有创意的地图图表。祝你学习愉快！

分享到：
上一篇 揭秘AlmaLinux在金融、教育、医疗等行业的成功应用案例，助力企业数字化转型
下一篇 揭秘：企业如何用MongoDB轻松应对海量数据挑战，案例解析大数据处理高效秘诀

相关文章

揭秘AlmaLinux在金融、教育、医疗等行业的成功应用案例，助力企业数字化转型
2026-08-20
掌握TensorFlow，从这些实际案例开始学习深度学习！
2026-08-20
揭秘：企业如何用MongoDB轻松应对海量数据挑战，案例解析大数据处理高效秘诀
2026-08-20
从入门到精通：TensorFlow实战案例解析，助你轻松掌握深度学习应用
2026-08-20