案例

轻松掌握echarts地图图表：20个实用案例教学，助力数据分析入门

2026-08-26 0 阅读

ECharts是一款功能强大的JavaScript图表库，它支持多种类型的图表，其中包括地图图表。地图图表能够将数据与地理位置相结合，使得数据分析更加直观和生动。本篇文章将为你带来20个实用的ECharts地图图表案例，帮助你轻松入门数据分析。

案例一：中国地图省份分布

案例描述

展示中国各省份的人口分布情况。

实现步骤

  1. 准备中国地图的JSON数据。
  2. 使用ECharts的echarts/map/js/china.js引入中国地图。
  3. 配置地图图表的基本参数，如标题、地图类型、数据等。

代码示例

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

var option = {
    title: {
        text: '中国各省份人口分布'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '人口',
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 2154.2},
            {name: '上海', value: 2425.27},
            // ... 其他省份数据
        ]
    }]
};

myChart.setOption(option);

案例二：全球地图国家分布

案例描述

展示全球各国家的GDP分布情况。

实现步骤

  1. 准备全球地图的JSON数据。
  2. 使用ECharts的echarts/map/js/world.js引入全球地图。
  3. 配置地图图表的基本参数，如标题、地图类型、数据等。

代码示例

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

var option = {
    title: {
        text: '全球各国GDP分布'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: 'GDP',
        type: 'map',
        mapType: 'world',
        data: [
            {name: 'United States', value: 210932},
            {name: 'China', value: 114367},
            // ... 其他国家数据
        ]
    }]
};

myChart.setOption(option);

案例三：城市地图区域分布

案例描述

展示某个城市各区域的人口密度分布情况。

实现步骤

  1. 准备城市地图的JSON数据。
  2. 使用ECharts的echarts/map/js/city.js引入城市地图。
  3. 配置地图图表的基本参数，如标题、地图类型、数据等。

代码示例

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

var option = {
    title: {
        text: '城市各区域人口密度分布'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '人口密度',
        type: 'map',
        mapType: 'city',
        data: [
            {name: '市中心', value: 10000},
            {name: '郊区', value: 5000},
            // ... 其他区域数据
        ]
    }]
};

myChart.setOption(option);

案例四：行政区划边界展示

案例描述

展示某个行政区划的边界情况。

实现步骤

  1. 准备行政区划的JSON数据。
  2. 使用ECharts的echarts/map/js/province.js引入行政区划地图。
  3. 配置地图图表的基本参数，如标题、地图类型、数据等。

代码示例

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

var option = {
    title: {
        text: '行政区划边界展示'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '行政区划',
        type: 'map',
        mapType: 'province',
        data: [
            {name: '北京', selected: true},
            {name: '天津'},
            // ... 其他行政区划数据
        ]
    }]
};

myChart.setOption(option);

案例五：地图热力图

案例描述

展示某个地区的温度分布情况。

实现步骤

  1. 准备温度数据的JSON数据。
  2. 使用ECharts的echarts/map/js/china.js引入中国地图。
  3. 配置地图图表的基本参数，如标题、地图类型、数据等。

代码示例

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

var option = {
    title: {
        text: '地区温度分布'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '温度',
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, 15]},
            {name: '上海', value: [121.47, 31.23, 18]},
            // ... 其他地区数据
        ]
    }]
};

myChart.setOption(option);

案例六：地图散点图

案例描述

展示某个地区的疫情分布情况。

实现步骤

  1. 准备疫情数据的JSON数据。
  2. 使用ECharts的echarts/map/js/china.js引入中国地图。
  3. 配置地图图表的基本参数，如标题、地图类型、数据等。

代码示例

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

var option = {
    title: {
        text: '地区疫情分布'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '疫情',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, 100]},
            {name: '上海', value: [121.47, 31.23, 150]},
            // ... 其他地区数据
        ]
    }]
};

myChart.setOption(option);

案例七：地图折线图

案例描述

展示某个地区的降雨量变化情况。

实现步骤

  1. 准备降雨量数据的JSON数据。
  2. 使用ECharts的echarts/map/js/china.js引入中国地图。
  3. 配置地图图表的基本参数，如标题、地图类型、数据等。

代码示例

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

var option = {
    title: {
        text: '地区降雨量变化'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '降雨量',
        type: 'line',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, 50]},
            {name: '上海', value: [121.47, 31.23, 80]},
            // ... 其他地区数据
        ]
    }]
};

myChart.setOption(option);

案例八：地图柱状图

案例描述

展示某个地区的GDP排名情况。

实现步骤

  1. 准备GDP排名数据的JSON数据。
  2. 使用ECharts的echarts/map/js/china.js引入中国地图。
  3. 配置地图图表的基本参数，如标题、地图类型、数据等。

代码示例

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

var option = {
    title: {
        text: '地区GDP排名'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: 'GDP',
        type: 'bar',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: 210932},
            {name: '上海', value: 242527},
            // ... 其他地区数据
        ]
    }]
};

myChart.setOption(option);

案例九：地图饼图

案例描述

展示某个地区的产业分布情况。

实现步骤

  1. 准备产业分布数据的JSON数据。
  2. 使用ECharts的echarts/map/js/china.js引入中国地图。
  3. 配置地图图表的基本参数，如标题、地图类型、数据等。

代码示例

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

var option = {
    title: {
        text: '地区产业分布'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '产业',
        type: 'pie',
        coordinateSystem: 'geo',
        data: [
            {name: '第一产业', value: 1000},
            {name: '第二产业', value: 2000},
            {name: '第三产业', value: 3000}
        ]
    }]
};

myChart.setOption(option);

案例十：地图组合图表

案例描述

展示某个地区的疫情、降雨量、GDP排名和产业分布情况。

实现步骤

  1. 准备疫情、降雨量、GDP排名和产业分布数据的JSON数据。
  2. 使用ECharts的echarts/map/js/china.js引入中国地图。
  3. 配置地图图表的基本参数，如标题、地图类型、数据等。

代码示例

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

var option = {
    title: {
        text: '地区综合信息'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '疫情',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, 100]},
            {name: '上海', value: [121.47, 31.23, 150]},
            // ... 其他地区数据
        ]
    }, {
        name: '降雨量',
        type: 'line',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, 50]},
            {name: '上海', value: [121.47, 31.23, 80]},
            // ... 其他地区数据
        ]
    }, {
        name: 'GDP',
        type: 'bar',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: 210932},
            {name: '上海', value: 242527},
            // ... 其他地区数据
        ]
    }, {
        name: '产业',
        type: 'pie',
        coordinateSystem: 'geo',
        data: [
            {name: '第一产业', value: 1000},
            {name: '第二产业', value: 2000},
            {name: '第三产业', value: 3000}
        ]
    }]
};

myChart.setOption(option);

案例十一：地图动画效果

案例描述

展示某个地区的疫情传播过程。

实现步骤

  1. 准备疫情传播数据的JSON数据。
  2. 使用ECharts的echarts/map/js/china.js引入中国地图。
  3. 配置地图图表的基本参数，如标题、地图类型、数据等。
  4. 添加动画效果，使疫情传播过程更加生动。

代码示例

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

var option = {
    title: {
        text: '疫情传播过程'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '疫情',
        type: 'lines',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, 100]},
            {name: '上海', value: [121.47, 31.23, 150]},
            // ... 其他地区数据
        ],
        effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: '#fff',
            symbolSize: 3
        }
    }]
};

myChart.setOption(option);

案例十二：地图点击事件

案例描述

展示某个地区的疫情详细信息。

实现步骤

  1. 准备疫情数据的JSON数据。
  2. 使用ECharts的echarts/map/js/china.js引入中国地图。
  3. 配置地图图表的基本参数，如标题、地图类型、数据等。
  4. 添加点击事件，当用户点击某个地区时，显示该地区的疫情详细信息。

代码示例

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

var option = {
    title: {
        text: '地区疫情详细信息'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '疫情',
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 150},
            // ... 其他地区数据
        ],
        label: {
            show: true,
            formatter: function (params) {
                return params.name + '：' + params.value;
            }
        }
    }]
};

myChart.setOption(option);

myChart.on('click', function (params) {
    console.log(params.name + '：' + params.value);
});

案例十三：地图缩放与平移

案例描述

展示某个地区的疫情分布情况，并支持用户进行地图缩放和平移操作。

实现步骤

  1. 准备疫情数据的JSON数据。
  2. 使用ECharts的echarts/map/js/china.js引入中国地图。
  3. 配置地图图表的基本参数，如标题、地图类型、数据等。
  4. 设置地图的缩放和平移参数，使用户能够自由操作地图。

代码示例

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

var option = {
    title: {
        text: '地区疫情分布'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '疫情',
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 150},
            // ... 其他地区数据
        ]
    }]
};

myChart.setOption(option);

myChart.on('click', function (params) {
    myChart.dispatchAction({
        type: 'geoZoom',
        seriesIndex: 0,
        data: [params.name]
    });
});

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

案例描述

展示某个地区的疫情分布情况，并支持数据动态更新。

实现步骤

  1. 准备疫情数据的JSON数据。
  2. 使用ECharts的echarts/map/js/china.js引入中国地图。
  3. 配置地图图表的基本参数，如标题、地图类型、数据等。
  4. 使用定时器或事件监听器，定期更新数据。

代码示例

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

var option = {
    title: {
        text: '地区疫情分布'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '疫情',
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 150},
            // ... 其他地区数据
        ]
    }]
};

myChart.setOption(option);

function updateData() {
    // 更新数据
    var newData = [
        {name: '北京', value: 110},
        {name: '上海', value: 160},
        // ... 其他地区数据
    ];
    myChart.setOption({
        series: [{
            data: newData
        }]
    });
}

setInterval(updateData, 1000);

案例十五：地图数据筛选

案例描述

展示某个地区的疫情分布情况，并支持用户筛选数据。

实现步骤

  1. 准备疫情数据的JSON数据。
  2. 使用ECharts的echarts/map/js/china.js引入中国地图。
  3. 配置地图图表的基本参数，如标题、地图类型、数据等。
  4. 添加筛选功能，允许用户选择要显示的数据。

代码示例

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

var option = {
    title: {
        text: '地区疫情分布'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '疫情',
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 150},
            // ... 其他地区数据
        ]
    }]
};

myChart.setOption(option);

function filterData(filterName) {
    var newData = [];
    var data = myChart.getOption().series[0].data;
    for (var i = 0; i < data.length; i++) {
        if (data[i].name === filterName) {
            newData.push(data[i]);
        }
    }
    myChart.setOption({
        series: [{
            data: newData
        }]
    });
}

// 添加筛选按钮
var filterButton = document.createElement('button');
filterButton.innerHTML = '筛选';
filterButton.onclick = function () {
    filterData('北京');
};
document.body.appendChild(filterButton);

案例十六：地图数据聚合

案例描述

展示某个地区的疫情分布情况，并支持数据聚合。

实现步骤

  1. 准备疫情数据的JSON数据。
  2. 使用ECharts的echarts/map/js/china.js引入中国地图。
  3. 配置地图图表的基本参数，如标题、地图类型、数据等。
  4. 使用ECharts的heatmap系列实现数据聚合效果。

代码示例

”`javascript var myChart = echarts.init(document.getElementById(‘main’));

var option = {

title: {
    text: '地区疫情分布'
},
tooltip: {
    trigger: 'item'
},
series: [{
    name: '疫情',
    type: 'heatmap',
    coordinateSystem: 'geo',
    data: [
        {name: '北京', value: [116.46, 39.92, 100]},
        {name
分享到：
上一篇 揭秘 AlmaLinux 在金融、教育、医疗等行业的创新应用与成功案例
下一篇 如何从数据丢失到成功恢复：MySQL数据恢复实战解析与案例分析

相关文章

揭秘 AlmaLinux 在金融、教育、医疗等行业的创新应用与成功案例
2026-08-26
掌握MySQL数据丢失恢复技巧，实战案例教你一步步还原数据宝藏
2026-08-26
如何从数据丢失到成功恢复：MySQL数据恢复实战解析与案例分析
2026-08-26
揭秘企业大数据管理：MongoDB应用实战解析及案例分析
2026-08-26