轻松学会echarts地图图表：10个实用案例解析，让数据分析更直观

案例一：中国省级行政区地图

ECharts 地图图表可以用来展示中国省级行政区的数据分布。以下是一个简单的示例代码，展示如何使用 ECharts 创建一个中国省级行政区地图。

// 基于准备好的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: false,
                position: 'center',
                formatter: '{b}'
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

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

案例二：世界地图

ECharts 也支持世界地图的展示。以下是一个世界地图的示例代码。

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

var option = {
    title: {
        text: '世界地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: false,
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '阿富汗', value: Math.round(Math.random() * 1000)},
                {name: '阿根廷', value: Math.round(Math.random() * 1000)},
                // ... 其他国家
            ]
        }
    ]
};

myChart.setOption(option);

案例三：自定义地图

如果你需要展示特定的地图区域，可以使用自定义地图功能。以下是一个自定义地图的示例。

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

var option = {
    title: {
        text: '自定义地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '自定义地图',
            type: 'map',
            mapType: 'custom',
            roam: true,
            label: {
                show: false,
                position: 'center',
                formatter: '{b}'
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            data: [
                {name: '区域1', value: Math.round(Math.random() * 1000)},
                {name: '区域2', value: Math.round(Math.random() * 1000)},
                // ... 其他区域
            ]
        }
    ]
};

myChart.setOption(option);

案例四：热力图

热力图是一种用于展示地理数据分布的图表。以下是一个热力图的示例。

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

var option = {
    title: {
        text: '热力图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '热力图',
            type: 'heatmap',
            data: [
                [1, 0, 100],
                [2, 0, 200],
                // ... 其他数据
            ]
        }
    ]
};

myChart.setOption(option);

案例五：多级地图

ECharts 支持多级地图的展示，以下是一个多级地图的示例。

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

var option = {
    title: {
        text: '多级地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    series: [
        {
            name: '多级地图',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 100},
                {name: '天津', value: 200},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

案例六：时间地图

时间地图可以用来展示随时间变化的数据分布。以下是一个时间地图的示例。

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

var option = {
    title: {
        text: '时间地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [
        {
            name: '时间地图',
            type: 'map',
            mapType: 'china',
            data: [
                {name: '北京', value: 100},
                {name: '天津', value: 200},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

案例七：地理坐标系地图

地理坐标系地图可以用来展示经纬度数据。以下是一个地理坐标系地图的示例。

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

var option = {
    title: {
        text: '地理坐标系地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [
        {
            name: '地理坐标系地图',
            type: 'map',
            mapType: 'china',
            coordinateSystem: 'geo',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: [116.46, 39.92]},
                {name: '天津', value: [117.21, 39.13]},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

案例八：自定义样式地图

你可以自定义地图的样式，例如颜色、边框等。以下是一个自定义样式地图的示例。

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

var option = {
    title: {
        text: '自定义样式地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    series: [
        {
            name: '自定义样式地图',
            type: 'map',
            mapType: 'china',
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 100},
                {name: '天津', value: 200},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

案例九：地图与折线图结合

你可以将地图与其他图表类型结合，例如折线图。以下是一个地图与折线图结合的示例。

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

var option = {
    title: {
        text: '地图与折线图结合'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    series: [
        {
            name: '地图',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 100},
                {name: '天津', value: 200},
                // ... 其他省份
            ]
        },
        {
            name: '折线图',
            type: 'line',
            data: [
                {name: '北京', value: 100},
                {name: '天津', value: 200},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

案例十：地图与散点图结合

地图与散点图的结合可以用来展示地理空间中的点数据。以下是一个地图与散点图结合的示例。

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

var option = {
    title: {
        text: '地图与散点图结合'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    series: [
        {
            name: '地图',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 100},
                {name: '天津', value: 200},
                // ... 其他省份
            ]
        },
        {
            name: '散点图',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92]},
                {name: '天津', value: [117.21, 39.13]},
                // ... 其他点数据
            ]
        }
    ]
};

myChart.setOption(option);

以上是使用 ECharts 创建地图图表的10个实用案例。通过这些案例，你可以更好地了解 ECharts 地图图表的功能和用法，为你的数据分析工作提供更直观的展示方式。