案例

教你轻松制作echarts地图图表：30个实用案例详解，助你快速掌握数据可视化技巧

2026-11-01 0 阅读
教你轻松制作echarts地图图表：30个实用案例详解，助你快速掌握数据可视化技巧

引言

在数据可视化的世界中，地图图表以其直观性和实用性脱颖而出。ECharts作为一款强大的数据可视化库，提供了丰富的地图图表制作功能。本文将为你带来30个实用案例详解，帮助你快速掌握ECharts地图图表的制作技巧。

案例一：中国省市区地图

案例背景

展示中国各省市区的人口、GDP等数据。

制作步骤

  1. 准备地图数据：使用ECharts提供的地图数据或者自行获取。
  2. 配置地图系列：type: 'map'，mapType: 'china'。
  3. 添加数据：使用data属性传入具体的数值。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 1000},
            {name: '上海', value: 1500},
            // ...其他省市区数据
        ]
    }]
};

myChart.setOption(option);

实际效果

中国省市区地图

案例二：世界地图

案例背景

展示全球各大洲的GDP数据。

制作步骤

  1. 准备世界地图数据：使用ECharts提供的地图数据或者自行获取。
  2. 配置地图系列：type: 'map'，mapType: 'world'。
  3. 添加数据：使用data属性传入具体的数值。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'world',
        data: [
            {name: 'Asia', value: 2000},
            {name: 'Europe', value: 1500},
            // ...其他大洲数据
        ]
    }]
};

myChart.setOption(option);

实际效果

世界地图

案例三：自定义地图

案例背景

展示某城市各个区的人口密度。

制作步骤

  1. 准备自定义地图数据：使用ECharts提供的地图数据或者自行获取。
  2. 配置地图系列：type: 'map'，mapType: 'custom'。
  3. 添加数据：使用data属性传入具体的数值。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'custom',
        data: [
            {name: '区域一', value: 300},
            {name: '区域二', value: 200},
            // ...其他区域数据
        ]
    }]
};

myChart.setOption(option);

实际效果

自定义地图

案例四：热力地图

案例背景

展示某城市不同区域的温度分布。

制作步骤

  1. 准备热力地图数据：使用ECharts提供的地图数据或者自行获取。
  2. 配置地图系列：type: 'heatmap'。
  3. 添加数据：使用data属性传入具体的数值。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'heatmap',
        data: [
            [0, 0, 1],
            [1, 0, 2],
            // ...其他数据
        ]
    }]
};

myChart.setOption(option);

实际效果

热力地图

案例五：地图缩放与平移

案例背景

展示地图在不同比例下的显示效果。

制作步骤

  1. 配置地图系列：type: 'map'。
  2. 使用zoom和roam属性实现地图缩放和平移。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        zoom: 1.2,
        roam: true
    }]
};

myChart.setOption(option);

实际效果

地图缩放与平移

案例六：地图标签与标注

案例背景

展示地图上各个区域的标签和标注。

制作步骤

  1. 配置地图系列：type: 'map'。
  2. 使用label属性添加标签。
  3. 使用markPoint属性添加标注。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            formatter: '{b}'
        },
        markPoint: {
            symbol: 'pin',
            symbolSize: 50,
            data: [
                {name: '北京', value: [116.46, 39.92]},
                // ...其他标注数据
            ]
        }
    }]
};

myChart.setOption(option);

实际效果

地图标签与标注

案例七：地图交互

案例背景

展示地图交互效果，如点击事件、鼠标悬停事件等。

制作步骤

  1. 配置地图系列：type: 'map'。
  2. 使用click和mouseover等事件监听器实现交互效果。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        click: function (params) {
            alert(params.name + '：' + params.value);
        },
        mouseover: function (params) {
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: params.dataIndex
            });
        },
        mouseout: function (params) {
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: params.dataIndex
            });
        }
    }]
};

myChart.setOption(option);

实际效果

地图交互

案例八：地图动画效果

案例背景

展示地图动画效果，如渐显、放大等。

制作步骤

  1. 配置地图系列：type: 'map'。
  2. 使用animation属性添加动画效果。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        animation: true,
        animationDuration: 1000,
        animationEasing: 'bounceOut'
    }]
};

myChart.setOption(option);

实际效果

地图动画效果

案例九：地图颜色渐变

案例背景

展示地图颜色渐变效果，根据数据大小显示不同颜色。

制作步骤

  1. 配置地图系列：type: 'map'。
  2. 使用itemStyle属性设置颜色渐变。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        itemStyle: {
            areaColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#fff' // 0% 处的颜色
                }, {
                    offset: 1, color: '#f00' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
            }
        },
        data: [
            {name: '北京', value: 1000},
            {name: '上海', value: 1500},
            // ...其他省市区数据
        ]
    }]
};

myChart.setOption(option);

实际效果

地图颜色渐变

案例十：地图阴影效果

案例背景

展示地图阴影效果，使地图更具立体感。

制作步骤

  1. 配置地图系列：type: 'map'。
  2. 使用itemStyle属性设置阴影效果。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        itemStyle: {
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowOffsetX: 5,
            shadowOffsetY: 5
        },
        data: [
            {name: '北京', value: 1000},
            {name: '上海', value: 1500},
            // ...其他省市区数据
        ]
    }]
};

myChart.setOption(option);

实际效果

地图阴影效果

案例十一：地图与折线图结合

案例背景

展示地图与折线图结合，同时展示不同区域的温度变化趋势。

制作步骤

  1. 配置地图系列：type: 'map'。
  2. 配置折线图系列：type: 'line'。
  3. 将两个系列叠加在同一图表中。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 1000},
            {name: '上海', value: 1500},
            // ...其他省市区数据
        ]
    }, {
        type: 'line',
        data: [
            [0, 0, 1],
            [1, 0, 2],
            // ...其他数据
        ]
    }]
};

myChart.setOption(option);

实际效果

地图与折线图结合

案例十二：地图与柱状图结合

案例背景

展示地图与柱状图结合，同时展示不同区域的GDP数据。

制作步骤

  1. 配置地图系列：type: 'map'。
  2. 配置柱状图系列：type: 'bar'。
  3. 将两个系列叠加在同一图表中。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 1000},
            {name: '上海', value: 1500},
            // ...其他省市区数据
        ]
    }, {
        type: 'bar',
        data: [
            {name: '北京', value: 1000},
            {name: '上海', value: 1500},
            // ...其他数据
        ]
    }]
};

myChart.setOption(option);

实际效果

地图与柱状图结合

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

案例背景

展示地图与散点图结合，同时展示不同区域的温度分布。

制作步骤

  1. 配置地图系列：type: 'map'。
  2. 配置散点图系列：type: 'scatter'。
  3. 将两个系列叠加在同一图表中。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 1000},
            {name: '上海', value: 1500},
            // ...其他省市区数据
        ]
    }, {
        type: 'scatter',
        data: [
            [0, 0, 1],
            [1, 0, 2],
            // ...其他数据
        ]
    }]
};

myChart.setOption(option);

实际效果

地图与散点图结合

案例十四：地图与饼图结合

案例背景

展示地图与饼图结合，同时展示不同区域的GDP占比。

制作步骤

  1. 配置地图系列：type: 'map'。
  2. 配置饼图系列：type: 'pie'。
  3. 将两个系列叠加在同一图表中。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 1000},
            {name: '上海', value: 1500},
            // ...其他省市区数据
        ]
    }, {
        type: 'pie',
        data: [
            {name: '北京', value: 1000},
            {name: '上海', value: 1500},
            // ...其他数据
        ]
    }]
};

myChart.setOption(option);

实际效果

地图与饼图结合

案例十五：地图与雷达图结合

案例背景

展示地图与雷达图结合，同时展示不同区域的经济发展水平。

制作步骤

  1. 配置地图系列：type: 'map'。
  2. 配置雷达图系列：type: 'radar'。
  3. 将两个系列叠加在同一图表中。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: [100, 200, 300, 400]},
            {name: '上海', value: [200, 300, 400, 500]},
            // ...其他数据
        ]
    }, {
        type: 'radar',
        data: [
            {name: '北京', value: [100, 200, 300, 400]},
            {name: '上海', value: [200, 300, 400, 500]},
            // ...其他数据
        ]
    }]
};

myChart.setOption(option);

实际效果

地图与雷达图结合

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

案例背景

展示地图与漏斗图结合，同时展示不同区域的销售情况。

制作步骤

  1. 配置地图系列：type: 'map'。
  2. 配置漏斗图系列：type: 'funnel'。
  3. 将两个系列叠加在同一图表中。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 1000},
            {name: '上海', value: 1500},
            // ...其他省市区数据
        ]
    }, {
        type: 'funnel',
        data: [
            {name: '北京', value: 1000},
            {name: '上海', value: 1500},
            // ...其他数据
        ]
    }]
};

myChart.setOption(option);

实际效果

地图与漏斗图结合

案例十七：地图与仪表盘结合

案例背景

展示地图与仪表盘结合，同时展示不同区域的工业产值。

制作步骤

  1. 配置地图系列：type: 'map'。
  2. 配置仪表盘系列：type: 'gauge'。
  3. 将两个系列叠加在同一图表中。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 1000},
            {name: '上海', value: 1500},
            // ...其他省市区数据
        ]
    }, {
        type: 'gauge',
        data: [
            {name: '北京', value: 1000},
            {name: '上海', value: 1500},
            // ...其他数据
        ]
    }]
};

myChart.setOption(option);

实际效果

地图与仪表盘结合

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

案例背景

展示地图与漏斗图结合，同时展示不同区域的销售情况。

制作步骤

  1. 配置地图系列：type: 'map'。
  2. 配置漏斗图系列：type: 'funnel'。
  3. 将两个系列叠加在同一图表中。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 1000},
            {name: '上海', value: 1500},
            // ...其他省市区数据
        ]
    }, {
        type: 'funnel',
        data: [
            {name: '北京', value: 1000},
            {name: '上海', value: 1500},
            // ...其他数据
        ]
    }]
};

myChart.setOption(option);

实际效果

![地图与漏斗图结合](https://

分享到：
上一篇 TensorFlow赋能：揭秘人工智能在现实世界中的多样应用与解决方案
下一篇 Java 8新特性详解：实战案例带你轻松上手编程新潮流

相关文章

TensorFlow赋能：揭秘人工智能在现实世界中的多样应用与解决方案
2026-11-01
揭秘AlmaLinux应用：轻松实现企业级项目的可靠选择
2026-11-01
Java 8新特性详解：实战案例带你轻松上手编程新潮流
2026-11-01
揭秘Tails系统如何助力个人隐私：实战案例解析与保护指南
2026-11-01