案例

新手必学！轻松掌握echarts地图图表，10个实用案例带你玩转数据可视化

2026-11-02 0 阅读

在数字化时代，数据可视化已经成为数据分析与展示的重要手段。ECharts 作为一款功能强大的可视化库，能够帮助开发者轻松实现地图图表的创建。本文将带您入门 ECharts 地图图表的制作，并提供 10 个实用案例，让您在实践中提升数据可视化技能。

基础入门：ECharts 地图图表简介

ECharts 地图图表是 ECharts 库中的一个重要组成部分，它允许开发者将地图数据可视化，展现地理空间上的数据分布。以下是一些 ECharts 地图图表的基础概念：

  • 地图类型：包括中国地图、世界地图、行政区划地图等。
  • 数据格式：地图数据通常以 JSON 格式提供，包含地理坐标和区域信息。
  • 配置选项：通过配置项可以自定义地图的样式、颜色、标注等。

实战案例：10 个 ECharts 地图图表应用

案例一：中国地图展示各省份 GDP

实现思路：通过加载中国地图数据，为每个省份绘制代表 GDP 的柱状图。

// 以下是 ECharts 初始化和配置的代码示例
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '中国各省份 GDP'
    },
    tooltip: {},
    legend: {
        data:['GDP']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: 'GDP',
        type: 'bar',
        data: []
    }]
};

// 加载数据并更新图表
function loadData() {
    // 假设 data 是从后端获取的 GDP 数据
    var data = [
        {name: '北京', value: 30000},
        {name: '上海', value: 28000},
        // ... 其他省份数据
    ];
    
    // 更新 xAxis 和 series.data
    option.xAxis.data = data.map(function (item) { return item.name; });
    option.series[0].data = data.map(function (item) { return item.value; });
    
    myChart.setOption(option);
}

loadData();

案例二：世界地图展示各国人口密度

实现思路：加载世界地图数据，用不同颜色区分人口密度等级。

// 以下是 ECharts 初始化和配置的代码示例
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '世界人口密度'
    },
    // ... 其他配置项
    series: [{
        name: '人口密度',
        type: 'map',
        mapType: 'world',
        // ... 地图渲染相关配置
        data: []
    }]
};

// 加载数据并更新图表
function loadData() {
    // 假设 data 是从后端获取的人口密度数据
    var data = [
        {name: '国家1', value: 100},
        {name: '国家2', value: 200},
        // ... 其他国家数据
    ];
    
    // 更新 series.data
    option.series[0].data = data;
    
    myChart.setOption(option);
}

loadData();

案例三：行政区划地图展示疫情分布

实现思路：加载中国行政区划地图数据，用不同颜色标注疫情高风险地区。

// 以下是 ECharts 初始化和配置的代码示例
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '疫情风险地区分布'
    },
    // ... 其他配置项
    series: [{
        name: '疫情风险',
        type: 'map',
        mapType: 'china',
        // ... 地图渲染相关配置
        data: []
    }]
};

// 加载数据并更新图表
function loadData() {
    // 假设 data 是从后端获取的疫情数据
    var data = [
        {name: '高风险地区1', value: 1},
        {name: '高风险地区2', value: 0},
        // ... 其他地区数据
    ];
    
    // 更新 series.data
    option.series[0].data = data;
    
    myChart.setOption(option);
}

loadData();

案例四：城市地图展示交通流量

实现思路：加载城市地图数据，用动态效果展示不同时段的交通流量。

// 以下是 ECharts 初始化和配置的代码示例
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '城市交通流量'
    },
    // ... 其他配置项
    series: [{
        name: '交通流量',
        type: 'map',
        mapType: 'city',
        // ... 地图渲染相关配置
        data: []
    }]
};

// 加载数据并更新图表
function loadData() {
    // 假设 data 是从后端获取的交通流量数据
    var data = [
        {name: '道路1', value: 100},
        {name: '道路2', value: 200},
        // ... 其他道路数据
    ];
    
    // 更新 series.data
    option.series[0].data = data;
    
    myChart.setOption(option);
}

loadData();

案例五：区域地图展示旅游资源

实现思路：加载区域地图数据，标注旅游景点及游客数量。

// 以下是 ECharts 初始化和配置的代码示例
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '区域旅游资源'
    },
    // ... 其他配置项
    series: [{
        name: '旅游资源',
        type: 'map',
        mapType: 'province',
        // ... 地图渲染相关配置
        data: []
    }]
};

// 加载数据并更新图表
function loadData() {
    // 假设 data 是从后端获取的旅游资源数据
    var data = [
        {name: '景区1', value: 5000},
        {name: '景区2', value: 3000},
        // ... 其他景区数据
    ];
    
    // 更新 series.data
    option.series[0].data = data;
    
    myChart.setOption(option);
}

loadData();

案例六：三维地图展示地理信息系统

实现思路：利用 ECharts 的三维地图功能，展示地理信息系统中的各种信息。

// 以下是 ECharts 初始化和配置的代码示例
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地理信息系统'
    },
    // ... 其他配置项
    series: [{
        name: '地理信息',
        type: 'map3D',
        mapType: 'china',
        // ... 地图渲染相关配置
        data: []
    }]
};

// 加载数据并更新图表
function loadData() {
    // 假设 data 是从后端获取的地理信息系统数据
    var data = [
        {name: '地点1', value: 100},
        {name: '地点2', value: 200},
        // ... 其他地点数据
    ];
    
    // 更新 series.data
    option.series[0].data = data;
    
    myChart.setOption(option);
}

loadData();

案例七：地图图表结合折线图展示趋势

实现思路：将地图图表与折线图结合，展示不同地区数据的趋势变化。

// 以下是 ECharts 初始化和配置的代码示例
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地区数据趋势'
    },
    tooltip: {},
    legend: {
        data:['数据趋势']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '数据趋势',
        type: 'line',
        data: []
    }, {
        name: '地图',
        type: 'map',
        mapType: 'china',
        data: []
    }]
};

// 加载数据并更新图表
function loadData() {
    // 假设 data 是从后端获取的数据趋势和地图数据
    var dataTrend = [
        {name: '地区1', value: [100, 150, 200]},
        {name: '地区2', value: [100, 150, 300]},
        // ... 其他地区数据
    ];
    var mapData = [
        {name: '地区1', value: 100},
        {name: '地区2', value: 200},
        // ... 其他地区数据
    ];
    
    // 更新 xAxis.data、series[0].data 和 series[1].data
    option.xAxis.data = dataTrend.map(function (item) { return item.name; });
    option.series[0].data = dataTrend.map(function (item) { return item.value; });
    option.series[1].data = mapData;
    
    myChart.setOption(option);
}

loadData();

案例八：地图图表结合散点图展示分布

实现思路：将地图图表与散点图结合，展示不同地区的点状分布情况。

// 以下是 ECharts 初始化和配置的代码示例
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地区分布'
    },
    tooltip: {},
    legend: {
        data:['地区分布']
    },
    xAxis: {},
    yAxis: {},
    series: [{
        name: '地区分布',
        type: 'scatter',
        data: []
    }, {
        name: '地图',
        type: 'map',
        mapType: 'china',
        data: []
    }]
};

// 加载数据并更新图表
function loadData() {
    // 假设 data 是从后端获取的地区分布和地图数据
    var scatterData = [
        {name: '地区1', value: [120, 100]},
        {name: '地区2', value: [130, 200]},
        // ... 其他地区数据
    ];
    var mapData = [
        {name: '地区1', value: 100},
        {name: '地区2', value: 200},
        // ... 其他地区数据
    ];
    
    // 更新 series.data
    option.series[0].data = scatterData;
    option.series[1].data = mapData;
    
    myChart.setOption(option);
}

loadData();

案例九：地图图表结合饼图展示占比

实现思路：将地图图表与饼图结合，展示不同地区的占比情况。

// 以下是 ECharts 初始化和配置的代码示例
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地区占比'
    },
    tooltip: {},
    legend: {
        data:['地区占比']
    },
    xAxis: {},
    yAxis: {},
    series: [{
        name: '地区占比',
        type: 'pie',
        data: []
    }, {
        name: '地图',
        type: 'map',
        mapType: 'china',
        data: []
    }]
};

// 加载数据并更新图表
function loadData() {
    // 假设 data 是从后端获取的地区占比和地图数据
    var pieData = [
        {name: '地区1', value: 300},
        {name: '地区2', value: 200},
        // ... 其他地区数据
    ];
    var mapData = [
        {name: '地区1', value: 100},
        {name: '地区2', value: 200},
        // ... 其他地区数据
    ];
    
    // 更新 series.data
    option.series[0].data = pieData;
    option.series[1].data = mapData;
    
    myChart.setOption(option);
}

loadData();

案例十：地图图表结合雷达图展示综合评价

实现思路：将地图图表与雷达图结合，展示不同地区的综合评价结果。

// 以下是 ECharts 初始化和配置的代码示例
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地区综合评价'
    },
    tooltip: {},
    legend: {
        data:['综合评价']
    },
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {},
    series: [{
        name: '综合评价',
        type: 'radar',
        data: []
    }, {
        name: '地图',
        type: 'map',
        mapType: 'china',
        data: []
    }]
};

// 加载数据并更新图表
function loadData() {
    // 假设 data 是从后端获取的综合评价数据和地图数据
    var radarData = [
        {name: '地区1', value: [80, 90, 70, 60, 50]},
        {name: '地区2', value: [90, 80, 70, 60, 50]},
        // ... 其他地区数据
    ];
    var mapData = [
        {name: '地区1', value: 100},
        {name: '地区2', value: 200},
        // ... 其他地区数据
    ];
    
    // 更新 xAxis.data、series[0].data 和 series[1].data
    option.xAxis.data = radarData.map(function (item) { return item.name; });
    option.series[0].data = radarData;
    option.series[1].data = mapData;
    
    myChart.setOption(option);
}

loadData();

通过以上 10 个实用案例，您已经可以初步掌握 ECharts 地图图表的制作方法。在实践过程中，可以根据实际需求调整配置项，发挥 ECharts 地图图表的强大功能，实现更加丰富多样的数据可视化效果。祝您在数据可视化领域取得更大的成就！

分享到：
上一篇 揭秘家庭酒柜吧台设计：空间利用与美酒搭配的完美结合
下一篇 穿越时空：不同时代生活变迁的精彩对比案例分析

相关文章

揭秘家庭酒柜吧台设计：空间利用与美酒搭配的完美结合
2026-11-02
酒柜选购攻略：从专业案例看如何挑选适合家庭的酒柜
2026-11-02
穿越时空：不同时代生活变迁的精彩对比案例分析
2026-11-02
揭秘企业如何用MongoDB高效处理海量数据：实战解析与优化策略
2026-11-02