案例

教你轻松上手ECharts地图图表：30个实用案例解析，助力数据可视化！

2026-11-09 0 阅读

引言

在数据可视化领域，地图图表因其直观性和地理信息的丰富性而备受青睐。ECharts作为国内最受欢迎的图表库之一，提供了强大的地图图表功能。本文将为你带来30个实用案例解析，帮助你轻松上手ECharts地图图表，提升数据可视化能力。

案例一：中国地图省份分布

案例描述

展示中国各省份的人口、GDP等数据的分布情况。

代码示例

// 基于准备好的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
            },
            data: [
                // 省份数据...
            ]
        }
    ]
};

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

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置地图类型为china。
  4. 配置数据。

案例二：世界地图国家分布

案例描述

展示世界各国的人口、GDP等数据的分布情况。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '世界地图国家分布'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: false
            },
            data: [
                // 国家数据...
            ]
        }
    ]
};

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

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置地图类型为world。
  4. 配置数据。

案例三：自定义地图

案例描述

根据自定义的地图数据展示数据分布情况。

代码示例

// 基于准备好的dom，初始化echarts实例
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
            },
            data: [
                // 自定义数据...
            ]
        }
    ]
};

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

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置地图类型为custom。
  4. 配置自定义地图数据。

案例四：热力图

案例描述

展示某个区域内数据的热力分布情况。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '热力图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '热力图',
            type: 'heatmap',
            data: [
                // 热力图数据...
            ]
        }
    ]
};

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

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置图表类型为heatmap。
  4. 配置数据。

案例五：地理坐标系散点图

案例描述

展示地理坐标系下的散点图。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地理坐标系散点图'
    },
    tooltip: {
        trigger: 'item'
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '散点图',
            type: 'scatter',
            data: [
                // 散点图数据...
            ]
        }
    ]
};

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

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置坐标轴类型为value。
  4. 设置图表类型为scatter。
  5. 配置数据。

案例六：地理坐标系折线图

案例描述

展示地理坐标系下的折线图。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地理坐标系折线图'
    },
    tooltip: {
        trigger: 'item'
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '折线图',
            type: 'line',
            data: [
                // 折线图数据...
            ]
        }
    ]
};

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

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置坐标轴类型为value。
  4. 设置图表类型为line。
  5. 配置数据。

案例七：地理坐标系柱状图

案例描述

展示地理坐标系下的柱状图。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地理坐标系柱状图'
    },
    tooltip: {
        trigger: 'item'
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '柱状图',
            type: 'bar',
            data: [
                // 柱状图数据...
            ]
        }
    ]
};

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

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置坐标轴类型为value。
  4. 设置图表类型为bar。
  5. 配置数据。

案例八：地理坐标系饼图

案例描述

展示地理坐标系下的饼图。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地理坐标系饼图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '饼图',
            type: 'pie',
            radius: '55%',
            data: [
                // 饼图数据...
            ]
        }
    ]
};

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

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置图表类型为pie。
  4. 配置数据。

案例九：地理坐标系环形图

案例描述

展示地理坐标系下的环形图。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地理坐标系环形图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '环形图',
            type: 'ring',
            radius: ['50%', '70%'],
            data: [
                // 环形图数据...
            ]
        }
    ]
};

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

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置图表类型为ring。
  4. 配置数据。

案例十：地理坐标系雷达图

案例描述

展示地理坐标系下的雷达图。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地理坐标系雷达图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '雷达图',
            type: 'radar',
            data: [
                // 雷达图数据...
            ]
        }
    ]
};

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

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置图表类型为radar。
  4. 配置数据。

案例十一：地理坐标系K线图

案例描述

展示地理坐标系下的K线图。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地理坐标系K线图'
    },
    tooltip: {
        trigger: 'item'
    },
    xAxis: {
        type: 'category',
        data: [
            // K线图数据...
        ]
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'K线图',
            type: 'k',
            data: [
                // K线图数据...
            ]
        }
    ]
};

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

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置坐标轴类型为category和value。
  4. 设置图表类型为k。
  5. 配置数据。

案例十二：地理坐标系漏斗图

案例描述

展示地理坐标系下的漏斗图。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地理坐标系漏斗图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '漏斗图',
            type: 'funnel',
            data: [
                // 漏斗图数据...
            ]
        }
    ]
};

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

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置图表类型为funnel。
  4. 配置数据。

案例十三：地理坐标系仪表盘

案例描述

展示地理坐标系下的仪表盘。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地理坐标系仪表盘'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '仪表盘',
            type: 'gauge',
            data: [
                // 仪表盘数据...
            ]
        }
    ]
};

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

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置图表类型为gauge。
  4. 配置数据。

案例十四：地理坐标系组合图表

案例描述

展示地理坐标系下的组合图表。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地理坐标系组合图表'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '组合图表',
            type: 'line',
            data: [
                // 线图数据...
            ]
        },
        {
            name: '组合图表',
            type: 'bar',
            data: [
                // 柱状图数据...
            ]
        }
    ]
};

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

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置图表类型为line和bar。
  4. 配置数据。

案例十五：地图图表动画效果

案例描述

为地图图表添加动画效果。

代码示例

// 基于准备好的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
            },
            data: [
                // 省份数据...
            ]
        }
    ]
};

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

// 添加动画效果
myChart.showLoading();
setTimeout(function () {
    myChart.hideLoading();
    myChart.setOption(option);
}, 1000);

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置地图类型为china。
  4. 配置数据。
  5. 使用showLoading和hideLoading方法添加动画效果。

案例十六：地图图表交互效果

案例描述

为地图图表添加交互效果。

代码示例

// 基于准备好的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
            },
            data: [
                // 省份数据...
            ]
        }
    ]
};

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

// 添加交互效果
myChart.on('click', function (params) {
    // 点击事件处理...
});

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置地图类型为china。
  4. 配置数据。
  5. 使用on方法添加交互效果。

案例十七：地图图表自定义样式

案例描述

自定义地图图表的样式。

代码示例

// 基于准备好的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: true,
                formatter: '{b}'
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            data: [
                // 省份数据...
            ]
        }
    ]
};

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

实现步骤

  1. 引入ECharts库。
  2. 初始化echarts实例。
  3. 设置地图类型为china。
  4. 配置数据。
  5. 自定义样式。

案例十八：地图图表数据筛选

案例描述

根据用户选择的数据筛选地图图表。

代码示例

”`javascript // 基于准备好的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
分享到：
上一篇 掌握almaLinux，企业转型不迷路：解读行业成功应用实例
下一篇 揭秘特困申请：真实案例教你如何顺利申请救助金

相关文章

掌握almaLinux，企业转型不迷路：解读行业成功应用实例
2026-11-09
揭秘特医调病：真实案例教你如何科学应对疾病挑战
2026-11-09
揭秘特困申请：真实案例教你如何顺利申请救助金
2026-11-09
解锁企业级项目：揭秘AlmaLinux的实际应用案例
2026-11-09