新手必学！轻松上手echarts地图图表，30个实用案例教你玩转地理数据可视化

在信息时代，数据可视化成为了展示地理信息的重要手段。ECharts 地图图表以其强大的功能和易用性，成为了地理数据可视化的热门工具。无论是展示全球贸易流向，还是分析区域经济分布，ECharts 都能提供丰富的解决方案。本文将为你提供 30 个实用案例，帮助你轻松上手 ECharts 地图图表，玩转地理数据可视化。

案例一：中国地图展示

主题句：使用 ECharts 实现中国地图的基本展示。

步骤：

引入 ECharts 库。
创建一个地图实例。
设置地图的数据和样式。
渲染地图。

// 引入 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',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            // ... 其他省份
        ]
    }]
};

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

案例二：全球地图展示

主题句：展示全球地图的基本结构和功能。

步骤：

引入 ECharts 库和全球地图数据。
创建地图实例。
设置地图的参数和样式。
渲染地图。

// 引入 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',
        formatter: function (params) {
            return params.name + ' : ' + params.value;
        }
    },
    series: [{
        name: '世界',
        type: 'map',
        mapType: 'world',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: 'Afghanistan', value: Math.round(Math.random() * 1000)},
            // ... 其他国家
        ]
    }]
};

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

案例三：热力图展示

主题句：使用热力图展示地理数据的热点分布。

步骤：

引入 ECharts 库和热力图数据。
创建地图实例。
设置地图的热力图参数。
渲染地图。

// 引入 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',
        formatter: function (params) {
            return params.name + ' : ' + params.value;
        }
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '世界',
        type: 'map',
        mapType: 'world',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: 'Afghanistan', value: Math.round(Math.random() * 1000)},
            // ... 其他国家
        ]
    }]
};

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

案例四：区域GDP分布

主题句：使用地图图表展示区域 GDP 分布情况。

步骤：

引入 ECharts 库和区域 GDP 数据。
创建地图实例。
设置地图的系列类型为 map。
设置数据并渲染地图。

// 引入 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: '中国区域 GDP 分布示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [{
        name: 'GDP',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            // ... 其他省份
        ]
    }]
};

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

案例五：城市人口密度

主题句：使用地图图表展示城市人口密度。

步骤：

引入 ECharts 库和城市人口密度数据。
创建地图实例。
设置地图的系列类型为 map。
设置数据并渲染地图。

// 引入 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}: {c}'
    },
    visualMap: {
        min: 100000,
        max: 10000000,
        left: 'left',
        top: 'bottom',
        text: ['低','高'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '人口密度',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            // ... 其他城市
        ]
    }]
};

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

案例六：交通流量分析

主题句：使用地图图表展示交通流量分析。

步骤：

引入 ECharts 库和交通流量数据。
创建地图实例。
设置地图的系列类型为 lines。
设置数据并渲染地图。

// 引入 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: 'lines',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92]},
            {name: '上海', value: [121.47, 31.23]},
            // ... 其他城市
        ],
        lineStyle: {
            opacity: 0.9,
            width: 1,
            curveness: 0
        }
    }]
};

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

案例七：旅游路线规划

主题句：使用地图图表展示旅游路线规划。

步骤：

引入 ECharts 库和旅游路线数据。
创建地图实例。
设置地图的系列类型为 lines。
设置数据并渲染地图。

// 引入 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: 'lines',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92]},
            {name: '上海', value: [121.47, 31.23]},
            {name: '杭州', value: [120.19, 30.26]},
            // ... 其他城市
        ],
        lineStyle: {
            opacity: 0.9,
            width: 1,
            curveness: 0
        }
    }]
};

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

案例八：天气状况展示

主题句：使用地图图表展示天气状况。

步骤：

引入 ECharts 库和天气数据。
创建地图实例。
设置地图的系列类型为 scatter。
设置数据并渲染地图。

// 引入 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: 'scatter',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 100)]},
            {name: '上海', value: [121.47, 31.23, Math.round(Math.random() * 100)]},
            // ... 其他城市
        ],
        symbolSize: 10,
        itemStyle: {
            color: '#f4e925',
            shadowBlur: 10,
            shadowColor: '#333'
        }
    }]
};

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

案例九：地震分布展示

主题句：使用地图图表展示地震分布情况。

步骤：

引入 ECharts 库和地震数据。
创建地图实例。
设置地图的系列类型为 effectScatter。
设置数据并渲染地图。

// 引入 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: 'effectScatter',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 100)]},
            {name: '上海', value: [121.47, 31.23, Math.round(Math.random() * 100)]},
            // ... 其他城市
        ],
        symbolSize: 10,
        rippleEffect: {
            brushType: 'stroke'
        },
        itemStyle: {
            color: '#f4e925',
            shadowBlur: 10,
            shadowColor: '#333'
        }
    }]
};

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

案例十：人口迁徙分析

主题句：使用地图图表展示人口迁徙分析。

步骤：

引入 ECharts 库和人口迁徙数据。
创建地图实例。
设置地图的系列类型为 lines。
设置数据并渲染地图。

// 引入 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: 'lines',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92]},
            {name: '上海', value: [121.47, 31.23]},
            // ... 其他城市
        ],
        lineStyle: {
            opacity: 0.9,
            width: 1,
            curveness: 0
        }
    }]
};

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

总结

通过以上 10 个案例，你已经对 ECharts 地图图表的基本使用有了初步的了解。ECharts 提供了丰富的功能和强大的扩展性，能够满足各种地理数据可视化的需求。在实际应用中，你可以根据自己的需求，选择合适的地图类型、系列类型、数据格式和样式，制作出精美的地图图表。

希望本文能够帮助你轻松上手 ECharts 地图图表，玩转地理数据可视化。