案例

教你用ECharts轻松绘制地图图表：30个实用案例详解

2026-08-25 0 阅读

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括地图图表。地图图表在展示地理分布数据时非常有效，可以帮助用户直观地理解数据的空间分布情况。本文将详细介绍如何使用 ECharts 绘制地图图表，并通过 30 个实用案例来展示其应用。

基础知识

在开始之前，我们需要了解一些基础知识：

  • ECharts 地图数据格式：ECharts 地图数据通常使用 JSON 格式，包括地理坐标、名称、值等信息。
  • 地图类型：ECharts 支持多种地图类型，如中国地图、世界地图、行政区划地图等。
  • 数据可视化：通过 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);

案例二：世界地图基础示例

与绘制中国地图类似，以下是绘制世界地图的示例：

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

var option = {
    title: {
        text: '世界地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            label: {
                show: true
            },
            data: [
                {name: 'United States', value: Math.round(Math.random() * 1000)},
                {name: 'Canada', 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: 'province',
            label: {
                show: true
            },
            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'
    },
    series: [
        {
            name: '自定义地图',
            type: 'map',
            mapType: 'custom',
            label: {
                show: true
            },
            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'
    },
    series: [
        {
            name: '地图颜色渐变',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            itemStyle: {
                areaColor: '#f4e925',
                color: '#f4e925'
            },
            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: 'china',
            label: {
                show: true,
                formatter: '{b}: {c}'
            },
            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'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['北京', '上海', '广州', '深圳']
    },
    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);

案例八：地图动画效果示例

以下是一个展示地图动画效果的示例：

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

var option = {
    title: {
        text: '地图动画效果示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '地图动画效果',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            animation: 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: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // ... 其他城市数据
            ]
        }
    ]
};

myChart.on('click', function (params) {
    console.log(params.name + ': ' + params.value);
});

myChart.setOption(option);

案例十：地图联动示例

以下是一个展示地图联动的示例：

var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));

var option1 = {
    title: {
        text: '地图联动示例 - 图1'
    },
    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)},
                // ... 其他城市数据
            ]
        }
    ]
};

var option2 = {
    title: {
        text: '地图联动示例 - 图2'
    },
    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)},
                // ... 其他城市数据
            ]
        }
    ]
};

myChart1.setOption(option1);
myChart2.setOption(option2);

myChart1.on('click', function (params) {
    myChart2.setOption({
        series: [{
            data: [{
                name: params.name,
                value: params.value
            }]
        }]
    });
});

案例十一：地图热力图示例

以下是一个展示地图热力图的示例：

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

var option = {
    title: {
        text: '地图热力图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '地图热力图',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 1000)]},
                {name: '上海', value: [121.48, 31.22, 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: 'scatter',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 1000)]},
                {name: '上海', value: [121.48, 31.22, 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: 'effectScatter',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 1000)]},
                {name: '上海', value: [121.48, 31.22, 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: 'bar',
            coordinateSystem: 'geo',
            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: 'line',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 1000)]},
                {name: '上海', value: [121.48, 31.22, 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: 'radar',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 1000)]},
                {name: '上海', value: [121.48, 31.22, 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: 'pie',
            coordinateSystem: 'geo',
            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: 'ring',
            coordinateSystem: 'geo',
            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: 'funnel',
            coordinateSystem: 'geo',
            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: 'gauge',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // ... 其他城市数据
            ]
        }
    ]
};

myChart.setOption(option);

案例二十一：地图混合图表示例

以下是一个展示地图混合图表的示例：

”`javascript 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() * 1000)]},
            {name: '上海', value: [121.48, 31.22, Math.round(Math.random() * 1000)]},
            // ... 其他城市数据
        ]
    },
    {
        name: '地图混合图表',
        type: 'line',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92
分享到：
上一篇 TensorFlow赋能：揭秘人工智能在现实世界中的多样化应用案例
下一篇 大数据时代，MongoDB如何高效处理案例解析，揭秘企业实践智慧

相关文章

TensorFlow赋能：揭秘人工智能在现实世界中的多样化应用案例
2026-08-25
探索AlmaLinux在金融、教育、医疗领域的应用典范，解锁企业数字化转型新路径
2026-08-25
大数据时代，MongoDB如何高效处理案例解析，揭秘企业实践智慧
2026-08-25
如何打造移动优先的响应式网页：10个实战案例解析
2026-08-25