轻松学会echarts地图图表：30个实用案例教你打造炫酷数据可视化

在数据可视化领域，ECharts 地图图表以其丰富的功能、灵活的配置和良好的性能，成为了开发者们制作地图类图表的热门选择。今天，我们就来通过30个实用案例，带你轻松学会如何使用 ECharts 地图图表，打造炫酷的数据可视化效果。

1. 基础地图展示

案例描述

展示一个简单的中国地图，并标注出部分城市的地理位置。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '数据',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '上海',
            value: 50
        }]
    }]
};

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

案例分析

在这个案例中，我们使用 echarts.init 方法初始化图表实例，然后通过 setOption 方法设置图表的配置项和数据。在配置项中，我们定义了图表的标题、提示框、视觉映射组件和数据系列。数据系列中，我们使用 type: 'map' 指定图表类型为地图，并通过 mapType: 'china' 设置地图类型为中国地图。最后，我们添加了两个数据点，分别代表北京和上海。

2. 省级地图展示

案例描述

展示一个省级地图，并标注出部分城市的地理位置。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '省级地图'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '数据',
        type: 'map',
        mapType: 'province',
        roam: true,
        label: {
            show: true
        },
        data: [{
            name: '浙江省',
            value: 100
        }, {
            name: '上海市',
            value: 50
        }]
    }]
};

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

案例分析

在这个案例中，我们将地图类型从中国地图改为省级地图，通过 mapType: 'province' 实现。其他配置项与基础地图展示案例类似。

3. 世界地图展示

案例描述

展示一个世界地图，并标注出部分国家的地理位置。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '世界地图'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '数据',
        type: 'map',
        mapType: 'world',
        roam: true,
        label: {
            show: true
        },
        data: [{
            name: '美国',
            value: 100
        }, {
            name: '中国',
            value: 50
        }]
    }]
};

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

案例分析

在这个案例中，我们将地图类型从中国地图改为世界地图，通过 mapType: 'world' 实现。其他配置项与基础地图展示案例类似。

4. 热力图

案例描述

展示一个热力图，表示不同地区的气温分布。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '热力图'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '气温',
        type: 'heatmap',
        data: [
            [0, 0, 100],
            [1, 0, 90],
            [2, 0, 80],
            // ... 其他数据
        ]
    }]
};

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

案例分析

在这个案例中，我们使用 type: 'heatmap' 指定图表类型为热力图。热力图的数据格式为二维数组，每个数组元素代表一个点的坐标和值。通过调整数据，我们可以展示不同地区的气温分布。

5. 地图缩放与拖拽

案例描述

展示一个可缩放和拖拽的地图。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '可缩放和拖拽的地图'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '数据',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '上海',
            value: 50
        }]
    }]
};

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

案例分析

在这个案例中，我们通过设置 series[0].roam: true 允许地图进行缩放和拖拽操作。

6. 地图标注

案例描述

展示一个带有标注的地图。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图标注'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '数据',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '上海',
            value: 50
        }]
    }]
};

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

案例分析

在这个案例中，我们通过设置 series[0].label.show: true 显示地图标注。

7. 地图点击事件

案例描述

展示一个可点击的地图，并监听点击事件。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图点击事件'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '数据',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '上海',
            value: 50
        }]
    }]
};

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

// 监听点击事件
myChart.on('click', function (params) {
    console.log(params.name + ' 被点击了');
});

案例分析

在这个案例中，我们通过 myChart.on('click', function (params) { ... }) 监听地图点击事件，并打印出被点击的城市名称。

8. 地图动画

案例描述

展示一个带有动画效果的地图。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图动画'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '数据',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '上海',
            value: 50
        }]
    }]
};

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

// 添加动画效果
myChart.setOption({
    animation: true
});

案例分析

在这个案例中，我们通过 myChart.setOption({ animation: true }) 添加动画效果。

9. 地图自定义样式

案例描述

展示一个自定义样式的地图。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '自定义样式地图'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '数据',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '上海',
            value: 50
        }],
        itemStyle: {
            normal: {
                areaColor: '#FFD700', // 地图颜色
                borderColor: '#FF8C00' // 边框颜色
            },
            emphasis: {
                areaColor: '#FFA500' // 鼠标悬停颜色
            }
        }
    }]
};

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

案例分析

在这个案例中，我们通过 itemStyle 设置地图的颜色和边框颜色。

10. 地图多层级

案例描述

展示一个多层级地图，包括国家、省份和城市。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '多层级地图'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '数据',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京市',
            value: 100
        }, {
            name: '上海市',
            value: 50
        }]
    }, {
        name: '省份',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京市',
            value: 100
        }, {
            name: '上海市',
            value: 50
        }]
    }, {
        name: '城市',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京市',
            value: 100
        }, {
            name: '上海市',
            value: 50
        }]
    }]
};

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

案例分析

在这个案例中，我们通过添加多个数据系列，分别表示国家、省份和城市层级。

11. 地图数据联动

案例描述

展示一个数据联动地图，当选择某个地区时，其他地区的数据也会发生变化。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '数据联动地图'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '数据',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京市',
            value: 100
        }, {
            name: '上海市',
            value: 50
        }]
    }]
};

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

// 监听点击事件
myChart.on('click', function (params) {
    // 获取当前选中地区的所有子地区
    var children = myChart.getOption().series[0].data.filter(function (item) {
        return item.name === params.name;
    });

    // 更新其他地区的数据
    myChart.setOption({
        series: [{
            data: children
        }]
    });
});

案例分析

在这个案例中，我们通过监听地图点击事件，获取当前选中地区的所有子地区，并更新其他地区的数据。

12. 地图数据筛选

案例描述

展示一个数据筛选地图，用户可以选择要显示的地区。

代码示例

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '数据筛选地图'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '数据',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京市',
            value: 100
        }, {
            name: '上海市',
            value: 50
        }]
    }]
};

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

// 监听点击事件
myChart.on('click', function (params) {
    // 获取当前选中地区的所有子地区
    var children = myChart.getOption().series[0].data.filter(function (item) {
        return item.name === params.name;
    });

    // 更新图表数据
    myChart.setOption({
        series: [{
            data: children
        }]
    });
});

案例分析

在这个案例中，我们通过监听地图点击事件，获取当前选中地区的所有子地区，并更新图表数据。

13. 地图数据排序

案例描述

展示一个数据排序地图，用户可以选择按照值或名称排序。

代码示例

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

// 指定图表的配置项和数据 var option = {

title: {
    text: '数据排序地图'
},
tooltip: {},
visualMap: {
    min: 0,
    max: 100,
    left: 'left',
    top: 'bottom',
    text: ['高','低'],
    calculable: true
},
series: [{
    name: '数据',
    type: 'map',
    mapType: 'china',
    label: {
        show: true
    },
    data: [{
        name: '北京市',
        value: 100
    }, {
        name: '上海市',
        value: 50
    }]
}]

};

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

// 监听点击事件 myChart.on(‘click’, function (params) {

// 获取当前选中地区的所有子地区
var children = myChart.getOption().series[0].data.filter(function (item) {
    return item.name === params.name;
});

// 按照值排序
children.sort(function (a, b) {
    return a.value - b.value

1. 基础地图展示

案例描述

代码示例

案例分析

2. 省级地图展示

案例描述

代码示例

案例分析

3. 世界地图展示

案例描述

代码示例

案例分析

4. 热力图

案例描述

代码示例

案例分析

5. 地图缩放与拖拽

案例描述

代码示例

案例分析

6. 地图标注

案例描述

代码示例

案例分析

7. 地图点击事件

案例描述

代码示例

案例分析

8. 地图动画

案例描述

代码示例

案例分析

9. 地图自定义样式

案例描述

代码示例

案例分析

10. 地图多层级

案例描述

代码示例

案例分析

11. 地图数据联动

案例描述

代码示例

案例分析

12. 地图数据筛选

案例描述

代码示例

案例分析

13. 地图数据排序

案例描述

代码示例

相关阅读

从零开始，用AlmaLinux构建高效企业级项目：实战案例详解与最佳实践

掌握almaLinux，解锁企业级应用新境界：探索真实行业案例，解锁高效运维秘诀

遭遇数据丢失？看MySQL数据恢复实战攻略，教你轻松找回重要数据

搅拌站高效管理秘诀：从选址到运营的全方位案例分析

搅拌站交易：揭秘真实案例，教你如何成功进行搅拌站买卖

揭秘MongoDB大数据应用：实战案例深度解析，助力企业高效数据管理

Java 8新特性深度解析：实战案例带你轻松掌握新功能

Mastering Business Negotiations: Real-World Scenarios and Effective Strategies in English Simulation

商务谈判成功秘诀：实战案例分析及实用技巧详解

“掌握关键技巧，看商务谈判实战案例如何破解难题”