轻松掌握ECharts地图图表：20个实用案例教学，一看就懂！

案例一：中国地图展示

在ECharts中，展示中国地图是一个基础而实用的功能。通过配置geo和series组件，我们可以轻松实现。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图示例'
    },
    tooltip: {},
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // 更多城市数据...
            ]
        }
    ]
};

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

案例二：世界地图展示

除了中国地图，ECharts也支持世界地图的展示。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '世界地图示例'
    },
    tooltip: {},
    geo: {
        map: 'world',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'world',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: 'China', value: Math.round(Math.random() * 1000)},
                // 更多国家数据...
            ]
        }
    ]
};

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

案例三：省份地图展示

展示单个省份的地图，可以更加细致地展示数据。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '广东省地图示例'
    },
    tooltip: {},
    geo: {
        map: '广东',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: '广东',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '广州市', value: Math.round(Math.random() * 1000)},
                // 更多城市数据...
            ]
        }
    ]
};

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

案例四：行政区划图展示

展示行政区划图，可以更直观地展示不同区域的数据。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '行政区划图示例'
    },
    tooltip: {},
    geo: {
        map: '行政区域',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: '行政区域',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                // 更多城市数据...
            ]
        }
    ]
};

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

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

将地图与折线图结合，可以同时展示地理位置和趋势数据。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图与折线图结合示例'
    },
    tooltip: {},
    geo: {
        map: '中国',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: '中国',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)}
            ]
        },
        {
            name: '折线图',
            type: 'line',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92]}
            ]
        }
    ]
};

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

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

将地图与散点图结合，可以展示地理位置和点状数据。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图与散点图结合示例'
    },
    tooltip: {},
    geo: {
        map: '中国',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: '中国',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)}
            ]
        },
        {
            name: '散点图',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92]}
            ]
        }
    ]
};

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

案例七：地图与柱状图结合

将地图与柱状图结合，可以展示地理位置和柱状数据。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图与柱状图结合示例'
    },
    tooltip: {},
    geo: {
        map: '中国',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: '中国',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)}
            ]
        },
        {
            name: '柱状图',
            type: 'bar',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92]}
            ]
        }
    ]
};

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

案例八：地图与饼图结合

将地图与饼图结合，可以展示地理位置和饼状数据。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图与饼图结合示例'
    },
    tooltip: {},
    geo: {
        map: '中国',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: '中国',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)}
            ]
        },
        {
            name: '饼图',
            type: 'pie',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92]}
            ]
        }
    ]
};

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

案例九：地图与雷达图结合

将地图与雷达图结合，可以展示地理位置和雷达数据。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图与雷达图结合示例'
    },
    tooltip: {},
    geo: {
        map: '中国',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: '中国',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)}
            ]
        },
        {
            name: '雷达图',
            type: 'radar',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92]}
            ]
        }
    ]
};

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

案例十：地图与K线图结合

将地图与K线图结合，可以展示地理位置和K线数据。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图与K线图结合示例'
    },
    tooltip: {},
    geo: {
        map: '中国',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: '中国',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)}
            ]
        },
        {
            name: 'K线图',
            type: 'k',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92]}
            ]
        }
    ]
};

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

案例十一：地图与漏斗图结合

将地图与漏斗图结合，可以展示地理位置和漏斗数据。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图与漏斗图结合示例'
    },
    tooltip: {},
    geo: {
        map: '中国',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: '中国',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)}
            ]
        },
        {
            name: '漏斗图',
            type: 'funnel',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92]}
            ]
        }
    ]
};

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

案例十二：地图与力导向图结合

将地图与力导向图结合，可以展示地理位置和力导向数据。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图与力导向图结合示例'
    },
    tooltip: {},
    geo: {
        map: '中国',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: '中国',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)}
            ]
        },
        {
            name: '力导向图',
            type: 'force',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92]}
            ]
        }
    ]
};

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

案例十三：地图与词云图结合

将地图与词云图结合，可以展示地理位置和词云数据。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图与词云图结合示例'
    },
    tooltip: {},
    geo: {
        map: '中国',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: '中国',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)}
            ]
        },
        {
            name: '词云图',
            type: 'wordCloud',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92]}
            ]
        }
    ]
};

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

案例十四：地图与水球