揭秘如何用ECharts轻松制作地图图表：30个实战案例分享，让数据可视变得简单直观

在信息爆炸的时代，数据可视化成为了数据分析和传达的重要手段。ECharts，作为一款功能强大的前端图表库，在地图图表的制作上尤为出色。通过ECharts，我们可以轻松地将数据与地图结合，实现简单直观的数据可视化。本文将分享30个实战案例，带你深入了解如何使用ECharts制作地图图表。

1. 基础地图展示

案例描述：展示全球或特定区域的地图，如世界地图、中国地图等。

实现步骤：

引入ECharts地图插件。
设置地图数据。
初始化地图图表。

// 引入ECharts主模块和地图模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/map/js/world');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        mapType: 'world',
        roam: true
    }]
};
myChart.setOption(option);

2. 省市区地图展示

案例描述：展示中国各省份、城市或区县的地图。

实现步骤：

引入ECharts地图插件。
设置地图数据。
初始化地图图表。

// 引入ECharts主模块和地图模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        roam: true
    }]
};
myChart.setOption(option);

3. 地图热力图

案例描述：展示地图上的热点数据，如人口密度、温度分布等。

实现步骤：

引入ECharts地图插件。
设置地图数据和热力数据。
初始化地图图表。

// 引入ECharts主模块和地图模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '上海',
            value: 80
        }],
        itemStyle: {
            normal: {
                label: {
                    show: true
                }
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        }
    }]
};
myChart.setOption(option);

4. 地图散点图

案例描述：展示地图上的散点数据，如城市分布、气象站点等。

实现步骤：

引入ECharts地图插件。
设置地图数据和散点数据。
初始化地图图表。

// 引入ECharts主模块和地图模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [{
            name: '北京',
            value: [116.46, 39.92]
        }, {
            name: '上海',
            value: [121.47, 31.23]
        }]
    }]
};
myChart.setOption(option);

5. 地图折线图

案例描述：展示地图上的折线数据，如气温变化、经济指标等。

实现步骤：

引入ECharts地图插件。
设置地图数据和折线数据。
初始化地图图表。

// 引入ECharts主模块和地图模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [{
            name: '北京',
            value: [116.46, 39.92, 10]
        }, {
            name: '上海',
            value: [121.47, 31.23, 15]
        }]
    }]
};
myChart.setOption(option);

6. 地图饼图

案例描述：展示地图上的饼状数据，如市场份额、人口比例等。

实现步骤：

引入ECharts地图插件。
设置地图数据和饼图数据。
初始化地图图表。

// 引入ECharts主模块和地图模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [{
            name: '北京',
            value: [116.46, 39.92, 0.3]
        }, {
            name: '上海',
            value: [121.47, 31.23, 0.2]
        }]
    }]
};
myChart.setOption(option);

7. 地图多维度图表

案例描述：将多种图表类型结合，展示地图上的多维数据。

实现步骤：

引入ECharts地图插件。
设置地图数据、多维数据。
初始化地图图表。

// 引入ECharts主模块和地图模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [{
            name: '北京',
            value: [116.46, 39.92, 10, 0.3]
        }, {
            name: '上海',
            value: [121.47, 31.23, 15, 0.2]
        }]
    }]
};
myChart.setOption(option);

8. 地图自定义样式

案例描述：自定义地图颜色、边框、阴影等样式。

实现步骤：

引入ECharts地图插件。
设置地图数据、样式数据。
初始化地图图表。

// 引入ECharts主模块和地图模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        itemStyle: {
            normal: {
                borderColor: '#fff',
                areaColor: '#f4f4f4'
            },
            emphasis: {
                borderColor: '#fff',
                areaColor: '#f0f0f0'
            }
        }
    }]
};
myChart.setOption(option);

9. 地图动画效果

案例描述：为地图添加动画效果，如地图缩放、数据动态展示等。

实现步骤：

引入ECharts地图插件。
设置地图数据、动画效果数据。
初始化地图图表。

// 引入ECharts主模块和地图模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        animation: true,
        data: [{
            name: '北京',
            value: [116.46, 39.92, 10]
        }, {
            name: '上海',
            value: [121.47, 31.23, 15]
        }]
    }]
};
myChart.setOption(option);

10. 地图交互效果

案例描述：为地图添加交互效果，如点击、悬停、拖拽等。

实现步骤：

引入ECharts地图插件。
设置地图数据、交互效果数据。
初始化地图图表。

// 引入ECharts主模块和地图模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        data: [{
            name: '北京',
            value: [116.46, 39.92, 10]
        }, {
            name: '上海',
            value: [121.47, 31.23, 15]
        }]
    }]
};
myChart.setOption(option);

11. 地图多层级展示

案例描述：展示地图的多层级数据，如城市、区县、街道等。

实现步骤：

引入ECharts地图插件。
设置地图数据、多层级数据。
初始化地图图表。

// 引入ECharts主模块和地图模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [{
            name: '北京',
            value: [116.46, 39.92, 10, 0.3]
        }, {
            name: '上海',
            value: [121.47, 31.23, 15, 0.2]
        }]
    }]
};
myChart.setOption(option);

12. 地图多数据系列展示

案例描述：在地图上同时展示多个数据系列，如人口、GDP、人均收入等。

实现步骤：

引入ECharts地图插件。
设置地图数据、多个数据系列数据。
初始化地图图表。

// 引入ECharts主模块和地图模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [{
            name: '北京',
            value: [116.46, 39.92, 10, 0.3]
        }, {
            name: '上海',
            value: [121.47, 31.23, 15, 0.2]
        }]
    }, {
        type: 'map',
        mapType: 'china',
        data: [{
            name: '北京',
            value: [116.46, 39.92, 5, 0.2]
        }, {
            name: '上海',
            value: [121.47, 31.23, 10, 0.3]
        }]
    }]
};
myChart.setOption(option);

13. 地图数据聚合

案例描述：将地图上的多个数据点聚合成一个点，如人口密度、气象站点等。

实现步骤：

引入ECharts地图插件。
设置地图数据、聚合数据。
初始化地图图表。

// 引入ECharts主模块和地图模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [{
            name: '北京',
            value: [116.46, 39.92, 100]
        }, {
            name: '上海',
            value: [121.47, 31.23, 80]
        }],
        // 聚合配置
        emphasis: {
            scale: 1.5,
            label: {
                show: true
            }
        }
    }]
};
myChart.setOption(option);

14. 地图数据筛选

案例描述：根据用户输入的筛选条件，展示符合条件的数据。

实现步骤：

引入ECharts地图插件。
设置地图数据、筛选数据。
初始化地图图表。

// 引入ECharts主模块和地图模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [{
            name: '北京',
            value: [116.46, 39.92, 100]
        }, {
            name: '上海',
            value: [121.47, 31.23, 80]
        }]
    }]
};
// 筛选数据
function filterData(keywords) {
    var data = option.series[0].data;
    return data.filter(function(item) {
        return item.name.indexOf(keywords) > -1;
    });
}
// 绑定筛选事件
myChart.on('click', function(params) {
    var keywords = params.name;
    var filteredData = filterData(keywords);
    myChart.setOption({
        series: [{
            data: filteredData
        }]
    });
});
myChart.setOption(option);

15. 地图数据导出

案例描述：将地图上的数据导出为Excel、CSV等格式。

实现步骤：

引入ECharts地图插件。
设置地图数据、导出数据。
初始化地图图表。

// 引入ECharts主模块和地图模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [{
            name: '北京',
            value: [116.46, 39.92, 100]
        }, {
            name: '上海',
            value: [121.47, 31.23, 80]
        }]
    }]
};
// 导出数据
function exportData() {
    var data = option.series[0].data;
    var header = ['名称', '经度', '纬度', '值'];
    var rows = data.map(function(item) {
        return [item.name, item.value[0], item.value[1], item.value[2]];
    });
    var csvContent = header.join(',') + '\n' + rows.map(function(row) {
        return row.join(',');
    }).join('\n');
    var blob = new Blob([csvContent], {type: 'text/csv;charset=utf-8'});
    var link = document.createElement('a');
    var url = URL.createObjectURL(blob);
    link.href = url;
    link.download = 'map_data.csv';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
myChart.setOption(option);

16. 地图数据可视化分析

案例描述：通过地图数据可视化分析，发现数据中的规律和趋势。

实现步骤：

引入ECharts地图插件。
设置地图数据、分析指标。
初始化地图图表。

// 引入ECharts主模块和地图模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [{
            name: '北京',
            value: [116.46, 39.92, 100]
        }, {
            name: '上海',
            value: [121.47, 31.23, 80]
        }]
    }]
};
// 分析指标
function analyzeData(data) {
    // 分析数据，计算平均值、最大值、最小值等指标
    // ...
    return analyzedData;
}
// 绑定分析事件
myChart.on('click', function(params) {
    var data = option.series[0].data;
    var analyzedData = analyzeData(data);
    // ...
});
myChart.setOption(option);

17. 地图数据与表格结合

案例描述：将地图数据与表格结合，展示更详细的信息。

实现步骤：

引入ECharts地图插件和表格插件。
设置地图数据、表格数据。
初始化地图图表和表格。

”`javascript // 引入ECharts主模块、地图插件和表格插件 var echarts = require(‘echarts/lib/echarts’); require(‘echarts/lib/chart/map’); require(‘echarts/lib/chart/table’); require(‘echarts/map/js/china’);

// 初始化地图图表 var myChart = echarts.init(document.getElementById(‘main’)); var option = {

series: [{
    type: 'map',
    mapType: 'china',
    data: [{
        name: '北京',
        value: [116.46, 39.92, 100]
    }, {
        name: '上海',
        value: [121.47, 31.23, 80]
    }]
}]

}; // 初始化表格 var tableChart = echarts.init(document.getElementById(‘table’));

// 绑定点击事件，将数据传递给表格 myChart.on(‘click’, function(params) {

var data = option.series[0].data;
var selectedData = data.filter(function(item) {
    return item.name === params.name;
});
tableChart.setOption({
    series: [{
        type: 'table',