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

在数据可视化领域，ECharts地图图表因其强大的功能和丰富的交互性而备受青睐。对于新手来说，掌握ECharts地图图表可以轻松将地理数据转化为直观的视觉图表，从而更好地传达信息。本文将带你通过10个实用案例，快速上手ECharts地图图表的制作。

一、ECharts地图图表简介

ECharts地图图表是基于ECharts库开发的，可以展示各种地图数据，包括中国地图、世界地图、行政区划地图等。它支持多种地图类型，如散点图、热力图、折线图、饼图等，并且具有丰富的交互功能。

二、案例一：中国地图散点图

1. 准备数据

首先，我们需要准备中国地图的JSON数据，以及需要展示的数据。以下是一个简单的示例：

var geoCoordMap = {
    '北京': [116.46,39.92],
    '上海': [121.48,31.22],
    // ... 其他城市数据
};

var data = [
    {name: '北京', value: 50},
    {name: '上海', value: 70},
    // ... 其他城市数据
];

2. 配置ECharts实例

接下来，我们需要配置ECharts实例，并添加地图组件和数据系列。

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

var option = {
    title: {
        text: '中国地图散点图'
    },
    tooltip: {},
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: data,
            symbolSize: function (val) {
                return val[2] / 10;
            },
            label: {
                normal: {
                    formatter: '{b}: {c}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: 'rgba(120, 36, 50, 0.5)',
                    shadowOffsetY: 5,
                    areaColor: '#f4e925'
                }
            }
        }
    ]
};

myChart.setOption(option);

3. 运行效果

运行上述代码，你将看到一个展示中国地图的散点图，其中散点的大小表示数据的数值。

三、案例二：世界地图热力图

1. 准备数据

与案例一类似，我们需要准备世界地图的JSON数据以及需要展示的数据。以下是一个简单的示例：

var geoCoordMap = {
    'New York': [-74.006, 40.7128],
    'Los Angeles': [-118.2437, 34.0522],
    // ... 其他城市数据
};

var data = [
    {name: 'New York', value: 50},
    {name: 'Los Angeles', value: 70},
    // ... 其他城市数据
];

2. 配置ECharts实例

配置ECharts实例，并添加地图组件和数据系列。

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

var option = {
    title: {
        text: '世界地图热力图'
    },
    tooltip: {},
    geo: {
        map: 'world',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: data,
            pointSize: 20,
            blurSize: 30
        }
    ]
};

myChart.setOption(option);

3. 运行效果

运行上述代码，你将看到一个展示世界地图的热力图，其中热力图的强度表示数据的数值。

四、案例三：中国地图多级联动

1. 准备数据

准备中国地图的JSON数据以及需要展示的数据。以下是一个简单的示例：

var geoCoordMap = {
    '北京': [116.46,39.92],
    '上海': [121.48,31.22],
    // ... 其他城市数据
};

var data = [
    {name: '北京', value: 50},
    {name: '上海', value: 70},
    // ... 其他城市数据
];

2. 配置ECharts实例

配置ECharts实例，并添加地图组件和数据系列。

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

var option = {
    title: {
        text: '中国地图多级联动'
    },
    tooltip: {},
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            coordinateSystem: 'geo',
            data: data,
            label: {
                show: true,
                formatter: '{b}'
            }
        }
    ]
};

myChart.setOption(option);

3. 运行效果

运行上述代码，你将看到一个展示中国地图的多级联动图表，点击不同省份可以查看对应的数据。

五、案例四：行政区划地图

1. 准备数据

准备行政区划地图的JSON数据以及需要展示的数据。以下是一个简单的示例：

var geoCoordMap = {
    '北京市': [116.46,39.92],
    '上海市': [121.48,31.22],
    // ... 其他城市数据
};

var data = [
    {name: '北京市', value: 50},
    {name: '上海市', value: 70},
    // ... 其他城市数据
];

2. 配置ECharts实例

配置ECharts实例，并添加地图组件和数据系列。

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

var option = {
    title: {
        text: '行政区划地图'
    },
    tooltip: {},
    geo: {
        map: 'province',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'province',
            coordinateSystem: 'geo',
            data: data,
            label: {
                show: true,
                formatter: '{b}'
            }
        }
    ]
};

myChart.setOption(option);

3. 运行效果

运行上述代码，你将看到一个展示行政区划地图的图表，其中每个省份的颜色表示对应的数据数值。

六、案例五：中国地图多级联动（多系列）

1. 准备数据

准备中国地图的JSON数据以及需要展示的数据。以下是一个简单的示例：

var geoCoordMap = {
    '北京': [116.46,39.92],
    '上海': [121.48,31.22],
    // ... 其他城市数据
};

var data1 = [
    {name: '北京', value: 50},
    {name: '上海', value: 70},
    // ... 其他城市数据
];

var data2 = [
    {name: '北京', value: 60},
    {name: '上海', value: 80},
    // ... 其他城市数据
];

2. 配置ECharts实例

配置ECharts实例，并添加地图组件和数据系列。

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

var option = {
    title: {
        text: '中国地图多级联动（多系列）'
    },
    tooltip: {},
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据1',
            type: 'map',
            mapType: 'china',
            coordinateSystem: 'geo',
            data: data1,
            label: {
                show: true,
                formatter: '{b}'
            }
        },
        {
            name: '数据2',
            type: 'map',
            mapType: 'china',
            coordinateSystem: 'geo',
            data: data2,
            label: {
                show: true,
                formatter: '{b}'
            }
        }
    ]
};

myChart.setOption(option);

3. 运行效果

运行上述代码，你将看到一个展示中国地图的多级联动图表，其中两个系列的数据分别用不同颜色表示。

七、案例六：中国地图折线图

1. 准备数据

准备中国地图的JSON数据以及需要展示的数据。以下是一个简单的示例：

var geoCoordMap = {
    '北京': [116.46,39.92],
    '上海': [121.48,31.22],
    // ... 其他城市数据
};

var data = [
    {name: '北京', value: [50, 30, 20, 10]},
    {name: '上海', value: [70, 60, 50, 40]},
    // ... 其他城市数据
];

2. 配置ECharts实例

配置ECharts实例，并添加地图组件和数据系列。

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

var option = {
    title: {
        text: '中国地图折线图'
    },
    tooltip: {},
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'line',
            coordinateSystem: 'geo',
            data: data,
            symbol: 'none',
            areaStyle: {
                opacity: 0.2
            },
            itemStyle: {
                color: '#f4e925'
            },
            smooth: true
        }
    ]
};

myChart.setOption(option);

3. 运行效果

运行上述代码，你将看到一个展示中国地图的折线图，其中折线表示不同时间的数据变化。

八、案例七：世界地图饼图

1. 准备数据

准备世界地图的JSON数据以及需要展示的数据。以下是一个简单的示例：

var geoCoordMap = {
    'New York': [-74.006, 40.7128],
    'Los Angeles': [-118.2437, 34.0522],
    // ... 其他城市数据
};

var data = [
    {name: 'New York', value: 50},
    {name: 'Los Angeles', value: 70},
    // ... 其他城市数据
];

2. 配置ECharts实例

配置ECharts实例，并添加地图组件和数据系列。

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

var option = {
    title: {
        text: '世界地图饼图'
    },
    tooltip: {},
    geo: {
        map: 'world',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'pie',
            coordinateSystem: 'geo',
            data: data,
            radius: ['30%', '50%'],
            center: ['50%', '50%'],
            label: {
                normal: {
                    formatter: '{b}: {c} ({d}%)'
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925'
                }
            }
        }
    ]
};

myChart.setOption(option);

3. 运行效果

运行上述代码，你将看到一个展示世界地图的饼图，其中饼图的大小表示数据的数值。

九、案例八：中国地图雷达图

1. 准备数据

准备中国地图的JSON数据以及需要展示的数据。以下是一个简单的示例：

var geoCoordMap = {
    '北京': [116.46,39.92],
    '上海': [121.48,31.22],
    // ... 其他城市数据
};

var data = [
    {name: '北京', value: [50, 60, 70, 80, 90]},
    {name: '上海', value: [70, 80, 90, 100, 110]},
    // ... 其他城市数据
];

2. 配置ECharts实例

配置ECharts实例，并添加地图组件和数据系列。

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

var option = {
    title: {
        text: '中国地图雷达图'
    },
    tooltip: {},
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'radar',
            coordinateSystem: 'geo',
            data: data,
            symbol: 'none',
            areaStyle: {
                opacity: 0.2
            },
            itemStyle: {
                color: '#f4e925'
            },
            smooth: true
        }
    ]
};

myChart.setOption(option);

3. 运行效果

运行上述代码，你将看到一个展示中国地图的雷达图，其中雷达图表示不同指标的数据变化。

十、案例九：中国地图仪表盘

1. 准备数据

准备中国地图的JSON数据以及需要展示的数据。以下是一个简单的示例：

var geoCoordMap = {
    '北京': [116.46,39.92],
    '上海': [121.48,31.22],
    // ... 其他城市数据
};

var data = [
    {name: '北京', value: 50},
    {name: '上海', value: 70},
    // ... 其他城市数据
];

2. 配置ECharts实例

配置ECharts实例，并添加地图组件和数据系列。

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

var option = {
    title: {
        text: '中国地图仪表盘'
    },
    tooltip: {},
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'gauge',
            coordinateSystem: 'geo',
            data: data,
            axisLine: {
                lineStyle: {
                    color: [
                        [0.2, '#f4e925'],
                        [0.8, '#f4e925'],
                        [1, '#f4e925']
                    ]
                }
            },
            pointer: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            title: {
                show: false
            },
            detail: {
                valueAnimation: true,
                formatter: '{value}'
            }
        }
    ]
};

myChart.setOption(option);

3. 运行效果

运行上述代码，你将看到一个展示中国地图的仪表盘，其中仪表盘表示数据的数值。

十一、案例十：中国地图混合图表

1. 准备数据

准备中国地图的JSON数据以及需要展示的数据。以下是一个简单的示例：

var geoCoordMap = {
    '北京': [116.46,39.92],
    '上海': [121.48,31.22],
    // ... 其他城市数据
};

var data1 = [
    {name: '北京', value: 50},
    {name: '上海', value: 70},
    // ... 其他城市数据
];

var data2 = [
    {name: '北京', value: 60},
    {name: '上海', value: 80},
    // ... 其他城市数据
];

2. 配置ECharts实例

配置ECharts实例，并添加地图组件和数据系列。

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

var option = {

title: {
    text: '中国地图混合图表'
},
tooltip: {},
geo: {
    map: 'china',
    roam: true,
    label: {
        emphasis: {
            show: false
        }
    },
    itemStyle: {
        normal: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        emphasis: {
            areaColor: