案例

新手必看！echarts地图图表制作全攻略：10个实用案例带你轻松入门

2026-09-09 0 阅读

在数据可视化领域，地图图表因其直观性和信息丰富性而备受青睐。ECharts作为国内领先的前端图表库，提供了强大的地图图表功能。对于新手来说，掌握ECharts地图图表的制作是一项非常有价值的技能。本文将带你通过10个实用案例，轻松入门ECharts地图图表的制作。

一、案例1：中国地图基础展示

1.1 案例背景

展示中国地图的基本轮廓，标注各个省份。

1.2 操作步骤

  1. 引入ECharts库：在HTML文件中引入ECharts库。
  2. 初始化地图：使用echarts.init方法初始化地图。
  3. 配置地图数据：配置地图的mapType属性为'china'。
  4. 添加标注：使用series属性添加标注。

1.3 代码示例

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

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            // ...其他省份
        ]
    }]
};

myChart.setOption(option);

二、案例2：世界地图展示

2.1 案例背景

展示世界地图的基本轮廓，标注各个国家。

2.2 操作步骤

  1. 引入ECharts库：与案例1相同。
  2. 初始化地图：使用echarts.init方法初始化地图。
  3. 配置地图数据：配置地图的mapType属性为'world'。
  4. 添加标注：与案例1类似。

2.3 代码示例

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

var option = {
    series: [{
        type: 'map',
        mapType: 'world',
        label: {
            show: true
        },
        data: [
            {name: 'China', value: Math.round(Math.random() * 1000)},
            // ...其他国家
        ]
    }]
};

myChart.setOption(option);

三、案例3：热力地图

3.1 案例背景

展示中国各个省份的疫情热力分布。

3.2 操作步骤

  1. 引入ECharts库：与案例1相同。
  2. 初始化地图：使用echarts.init方法初始化地图。
  3. 配置地图数据：配置地图的mapType属性为'china'，并设置热力图的数据。
  4. 添加热力图系列：使用series属性添加热力图系列。

3.3 代码示例

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

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            // ...其他省份
        ],
        emphasis: {
            label: {
                show: true
            }
        },
        itemStyle: {
            areaColor: '#f4e925',
            borderColor: '#fff'
        }
    }]
};

myChart.setOption(option);

四、案例4：地图点击事件

4.1 案例背景

实现地图点击事件，点击省份时显示详细信息。

4.2 操作步骤

  1. 引入ECharts库：与案例1相同。
  2. 初始化地图：使用echarts.init方法初始化地图。
  3. 配置地图数据：配置地图的mapType属性为'china'，并设置点击事件回调函数。
  4. 添加点击事件监听器：使用on方法添加点击事件监听器。

4.3 代码示例

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

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            // ...其他省份
        ],
        emphasis: {
            label: {
                show: true
            }
        },
        itemStyle: {
            areaColor: '#f4e925',
            borderColor: '#fff'
        }
    }]
};

myChart.setOption(option);

myChart.on('click', function (params) {
    if (params.componentType === 'series') {
        alert(params.name + '的详细信息：' + params.value);
    }
});

五、案例5：多地图叠加

5.1 案例背景

在同一页面上展示多个地图，如中国地图和世界地图。

5.2 操作步骤

  1. 引入ECharts库：与案例1相同。
  2. 初始化地图：分别使用echarts.init方法初始化两个地图。
  3. 配置地图数据：分别配置两个地图的数据。
  4. 添加地图到容器：将两个地图添加到HTML容器中。

5.3 代码示例

<div id="chinaMap" style="width: 500px;height:500px;"></div>
<div id="worldMap" style="width: 500px;height:500px;"></div>

var myChartChina = echarts.init(document.getElementById('chinaMap'));
var myChartWorld = echarts.init(document.getElementById('worldMap'));

var optionChina = {
    // ...中国地图配置
};

var optionWorld = {
    // ...世界地图配置
};

myChartChina.setOption(optionChina);
myChartWorld.setOption(optionWorld);

六、案例6：地图缩放与平移

6.1 案例背景

实现地图的缩放和平移功能。

6.2 操作步骤

  1. 引入ECharts库：与案例1相同。
  2. 初始化地图：使用echarts.init方法初始化地图。
  3. 配置地图数据：配置地图的mapType属性为'china'。
  4. 设置地图交互：使用series属性设置地图的交互配置。

6.3 代码示例

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

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            // ...其他省份
        ],
        emphasis: {
            label: {
                show: true
            }
        },
        itemStyle: {
            areaColor: '#f4e925',
            borderColor: '#fff'
        },
        zoom: {
            show: true,
            type: 'slider'
        },
        roam: {
            show: true
        }
    }]
};

myChart.setOption(option);

七、案例7：地图自定义标注

7.1 案例背景

在地图上添加自定义标注，如地标、景点等。

7.2 操作步骤

  1. 引入ECharts库：与案例1相同。
  2. 初始化地图：使用echarts.init方法初始化地图。
  3. 配置地图数据：配置地图的mapType属性为'china'。
  4. 添加自定义标注：使用series属性添加自定义标注。

7.3 代码示例

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

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            // ...其他省份
        ],
        emphasis: {
            label: {
                show: true
            }
        },
        itemStyle: {
            areaColor: '#f4e925',
            borderColor: '#fff'
        },
        markPoint: {
            data: [
                {name: '天安门', coord: [116.397428, 39.90923]},
                // ...其他地标
            ]
        }
    }]
};

myChart.setOption(option);

八、案例8：地图动态数据更新

8.1 案例背景

实现地图数据的动态更新，如实时显示疫情数据。

8.2 操作步骤

  1. 引入ECharts库：与案例1相同。
  2. 初始化地图：使用echarts.init方法初始化地图。
  3. 配置地图数据：配置地图的mapType属性为'china'。
  4. 设置定时器：使用setInterval方法设置定时器，定时更新地图数据。

8.3 代码示例

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

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            // ...其他省份
        ],
        emphasis: {
            label: {
                show: true
            }
        },
        itemStyle: {
            areaColor: '#f4e925',
            borderColor: '#fff'
        }
    }]
};

myChart.setOption(option);

var timer = setInterval(function () {
    option.series[0].data = [
        {name: '北京', value: Math.round(Math.random() * 1000)},
        // ...其他省份
    ];
    myChart.setOption(option);
}, 1000);

九、案例9：地图与折线图结合

9.1 案例背景

将地图与折线图结合，展示某个地区的历史数据变化。

9.2 操作步骤

  1. 引入ECharts库：与案例1相同。
  2. 初始化地图：使用echarts.init方法初始化地图。
  3. 配置地图数据：配置地图的mapType属性为'china'。
  4. 添加折线图系列：使用series属性添加折线图系列。

9.3 代码示例

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

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            // ...其他省份
        ],
        emphasis: {
            label: {
                show: true
            }
        },
        itemStyle: {
            areaColor: '#f4e925',
            borderColor: '#fff'
        }
    }, {
        type: 'line',
        data: [
            [0, 1000],
            [1, 900],
            // ...其他数据
        ]
    }]
};

myChart.setOption(option);

十、案例10：地图与饼图结合

10.1 案例背景

将地图与饼图结合，展示某个地区的占比情况。

10.2 操作步骤

  1. 引入ECharts库：与案例1相同。
  2. 初始化地图：使用echarts.init方法初始化地图。
  3. 配置地图数据：配置地图的mapType属性为'china'。
  4. 添加饼图系列：使用series属性添加饼图系列。

10.3 代码示例

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

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            // ...其他省份
        ],
        emphasis: {
            label: {
                show: true
            }
        },
        itemStyle: {
            areaColor: '#f4e925',
            borderColor: '#fff'
        }
    }, {
        type: 'pie',
        center: [500, 250],
        radius: '30%',
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            // ...其他数据
        ]
    }]
};

myChart.setOption(option);

通过以上10个实用案例，相信你已经对ECharts地图图表的制作有了初步的了解。在实际应用中，可以根据需求对地图进行各种配置和扩展，创造出更多精彩的效果。祝你在数据可视化领域取得更大的成就！

分享到：
上一篇 深度学习神器TensorFlow，揭秘各行各业创新应用案例解析
下一篇 揭秘MongoDB在大型数据分析中的应用与挑战：实战案例分析及优化策略

相关文章

深度学习神器TensorFlow，揭秘各行各业创新应用案例解析
2026-09-09
汽车大灯改装前后对比，君威车主分享实用改灯技巧
2026-09-09
揭秘MongoDB在大型数据分析中的应用与挑战：实战案例分析及优化策略
2026-09-09
掌握Java 8新特性，轻松实战案例分析大揭秘
2026-09-09