案例

揭秘：轻松上手echarts地图图表，10个实用案例教你绘制中国省市区地图

2026-06-22 0 阅读

在数据可视化领域，echarts地图图表因其强大的功能和易于上手的特性而备受青睐。今天，我们就来揭秘如何轻松上手echarts地图图表，并通过10个实用案例，带你一步步学会绘制中国省市区地图。

一、echarts地图图表简介

echarts是一款使用JavaScript实现的开源可视化库，它提供了一套丰富的图表类型，包括地图图表。echarts地图图表可以展示地理位置信息，并支持多种数据可视化效果，如热力图、散点图、折线图等。

二、绘制中国省市区地图的准备工作

在开始绘制地图之前，我们需要做一些准备工作：

  1. 引入echarts库：在HTML文件中引入echarts.js库。
  2. 获取地图数据：从网上下载中国省市区地图数据，或者使用echarts提供的地图数据。
  3. 了解地图数据结构：熟悉地图数据结构，以便在绘制地图时正确使用。

三、10个实用案例教你绘制中国省市区地图

案例一：基础地图展示

  1. HTML结构： 

    
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/china.js"></script>
<script src="your_script.js"></script>

  2. JavaScript代码：

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


var option = {
    title: {
        text: '中国省市区地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};


myChart.setOption(option);

案例二：自定义地图样式

  1. HTML结构： 

    
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/china.js"></script>
<script src="your_script.js"></script>

  2. JavaScript代码：

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


var option = {
    title: {
        text: '自定义地图样式'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            color: '#fff'
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};


myChart.setOption(option);

案例三：添加省市区标签

  1. HTML结构： 

    
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/china.js"></script>
<script src="your_script.js"></script>

  2. JavaScript代码：

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


var option = {
    title: {
        text: '添加省市区标签'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            formatter: '{b}'
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};


myChart.setOption(option);

案例四：添加热力图效果

  1. HTML结构： 

    
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/china.js"></script>
<script src="your_script.js"></script>

  2. JavaScript代码：

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


var option = {
    title: {
        text: '添加热力图效果'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};


myChart.setOption(option);

案例五：添加散点图效果

  1. HTML结构： 

    
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/china.js"></script>
<script src="your_script.js"></script>

  2. JavaScript代码：

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


var option = {
    title: {
        text: '添加散点图效果'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [{
            name: '北京',
            value: [116.46,39.92]
        }]
    }]
};


myChart.setOption(option);

案例六：添加折线图效果

  1. HTML结构： 

    
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/china.js"></script>
<script src="your_script.js"></script>

  2. JavaScript代码：

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


var option = {
    title: {
        text: '添加折线图效果'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [{
            name: '北京',
            value: [116.46,39.92]
        }]
    }]
};


myChart.setOption(option);

案例七：添加自定义数据

  1. HTML结构： 

    
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/china.js"></script>
<script src="your_script.js"></script>

  2. JavaScript代码：

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


var option = {
    title: {
        text: '添加自定义数据'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};


myChart.setOption(option);

案例八：添加动画效果

  1. HTML结构： 

    
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/china.js"></script>
<script src="your_script.js"></script>

  2. JavaScript代码：

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


var option = {
    title: {
        text: '添加动画效果'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};


myChart.setOption(option);

案例九：添加地图事件

  1. HTML结构： 

    
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/china.js"></script>
<script src="your_script.js"></script>

  2. JavaScript代码：

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


var option = {
    title: {
        text: '添加地图事件'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};


myChart.setOption(option);

案例十：添加自定义地图

  1. HTML结构： 

    
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/china.js"></script>
<script src="your_script.js"></script>

  2. JavaScript代码：

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


var option = {
    title: {
        text: '添加自定义地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};


myChart.setOption(option);

四、总结

通过以上10个实用案例，相信你已经掌握了绘制中国省市区地图的技巧。在实际应用中，可以根据需求调整地图样式、添加数据、设置动画效果等。希望这篇文章能帮助你轻松上手echarts地图图表，让你的数据可视化作品更加出色！

分享到：
上一篇 揭秘TensorFlow在智能领域的神奇应用，从图像识别到自然语言处理，带你探索AI的无限可能
下一篇 大数据时代，MongoDB如何助力企业高效处理海量数据？揭秘真实案例分析

相关文章

揭秘TensorFlow在智能领域的神奇应用，从图像识别到自然语言处理，带你探索AI的无限可能
2026-06-22
掌握AlmaLinux，解锁企业级项目新可能：从网站构建到云服务，案例解析实战技巧
2026-06-22
大数据时代，MongoDB如何助力企业高效处理海量数据？揭秘真实案例分析
2026-06-22
Java 8革新特性深度解析：实战案例带你玩转并发、Lambda表达式等实用技巧
2026-06-22