案例

轻松上手echarts地图图表：10个实用案例带你轻松制作中国地图可视化

2026-11-01 0 阅读

案例一：省份经济总量地图

简介

本案例将展示如何使用 ECharts 地图图表展示中国各省份的经济总量。通过颜色深浅来区分经济总量的高低。

步骤

  1. 准备数据：收集中国各省份的经济总量数据。
  2. 创建地图实例：使用 ECharts 的地图组件。
  3. 配置地图：设置地图的地理位置、颜色等属性。
  4. 添加数据系列：将省份经济总量数据添加到地图上，使用颜色映射展示数据。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国省份经济总量地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} (亿元)'
    },
    visualMap: {
        min: 0,
        max: 5000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '经济总量',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true
        },
        data: [
            // 省份经济总量数据
        ]
    }]
};

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

案例二：城市人口密度地图

简介

本案例将展示如何使用 ECharts 地图图表展示中国各城市的人口密度。通过散点图的形式展示人口密度分布。

步骤

  1. 准备数据：收集中国各城市的人口密度数据。
  2. 创建地图实例：使用 ECharts 的地图组件。
  3. 配置地图：设置地图的地理位置、颜色等属性。
  4. 添加数据系列：将城市人口密度数据添加到地图上，使用散点图展示数据。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市人口密度地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}'
    },
    series: [{
        name: '人口密度',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true
        },
        data: [
            // 城市人口密度数据
        ]
    }]
};

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

案例三：城市空气质量地图

简介

本案例将展示如何使用 ECharts 地图图表展示中国各城市的空气质量。通过颜色深浅来区分空气质量的优劣。

步骤

  1. 准备数据：收集中国各城市的空气质量数据。
  2. 创建地图实例：使用 ECharts 的地图组件。
  3. 配置地图：设置地图的地理位置、颜色等属性。
  4. 添加数据系列：将城市空气质量数据添加到地图上，使用颜色映射展示数据。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市空气质量地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 500,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '空气质量',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true
        },
        data: [
            // 城市空气质量数据
        ]
    }]
};

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

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

简介

本案例将展示如何使用 ECharts 地图图表展示中国各城市的交通流量。通过线条的粗细来区分交通流量的高低。

步骤

  1. 准备数据：收集中国各城市的交通流量数据。
  2. 创建地图实例：使用 ECharts 的地图组件。
  3. 配置地图：设置地图的地理位置、颜色等属性。
  4. 添加数据系列：将城市交通流量数据添加到地图上，使用线条展示数据。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市交通流量地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}'
    },
    series: [{
        name: '交通流量',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true
        },
        data: [
            // 城市交通流量数据
        ]
    }]
};

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

案例五：城市绿化覆盖率地图

简介

本案例将展示如何使用 ECharts 地图图表展示中国各城市的绿化覆盖率。通过颜色深浅来区分绿化覆盖率的优劣。

步骤

  1. 准备数据：收集中国各城市的绿化覆盖率数据。
  2. 创建地图实例：使用 ECharts 的地图组件。
  3. 配置地图：设置地图的地理位置、颜色等属性。
  4. 添加数据系列：将城市绿化覆盖率数据添加到地图上，使用颜色映射展示数据。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市绿化覆盖率地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '绿化覆盖率',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true
        },
        data: [
            // 城市绿化覆盖率数据
        ]
    }]
};

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

案例六：城市人口结构地图

简介

本案例将展示如何使用 ECharts 地图图表展示中国各城市的人口结构。通过饼图的形式展示人口结构。

步骤

  1. 准备数据：收集中国各城市的人口结构数据。
  2. 创建地图实例：使用 ECharts 的地图组件。
  3. 配置地图：设置地图的地理位置、颜色等属性。
  4. 添加数据系列：将城市人口结构数据添加到地图上，使用饼图展示数据。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市人口结构地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}%'
    },
    series: [{
        name: '人口结构',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true
        },
        data: [
            // 城市人口结构数据
        ]
    }]
};

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

案例七：城市房价地图

简介

本案例将展示如何使用 ECharts 地图图表展示中国各城市的房价。通过颜色深浅来区分房价的高低。

步骤

  1. 准备数据：收集中国各城市的房价数据。
  2. 创建地图实例：使用 ECharts 的地图组件。
  3. 配置地图：设置地图的地理位置、颜色等属性。
  4. 添加数据系列：将城市房价数据添加到地图上，使用颜色映射展示数据。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市房价地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} (元/平方米)'
    },
    visualMap: {
        min: 5000,
        max: 20000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '房价',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true
        },
        data: [
            // 城市房价数据
        ]
    }]
};

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

案例八：城市教育资源地图

简介

本案例将展示如何使用 ECharts 地图图表展示中国各城市的教育资源。通过颜色深浅来区分教育资源的优劣。

步骤

  1. 准备数据：收集中国各城市的教育资源数据。
  2. 创建地图实例：使用 ECharts 的地图组件。
  3. 配置地图：设置地图的地理位置、颜色等属性。
  4. 添加数据系列：将城市教育资源数据添加到地图上，使用颜色映射展示数据。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市教育资源地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '教育资源',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true
        },
        data: [
            // 城市教育资源数据
        ]
    }]
};

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

案例九：城市医疗资源地图

简介

本案例将展示如何使用 ECharts 地图图表展示中国各城市的医疗资源。通过颜色深浅来区分医疗资源的优劣。

步骤

  1. 准备数据：收集中国各城市的医疗资源数据。
  2. 创建地图实例：使用 ECharts 的地图组件。
  3. 配置地图：设置地图的地理位置、颜色等属性。
  4. 添加数据系列：将城市医疗资源数据添加到地图上，使用颜色映射展示数据。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市医疗资源地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '医疗资源',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true
        },
        data: [
            // 城市医疗资源数据
        ]
    }]
};

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

案例十：城市旅游热度地图

简介

本案例将展示如何使用 ECharts 地图图表展示中国各城市的旅游热度。通过颜色深浅来区分旅游热度的优劣。

步骤

  1. 准备数据：收集中国各城市的旅游热度数据。
  2. 创建地图实例：使用 ECharts 的地图组件。
  3. 配置地图：设置地图的地理位置、颜色等属性。
  4. 添加数据系列：将城市旅游热度数据添加到地图上，使用颜色映射展示数据。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市旅游热度地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '旅游热度',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true
        },
        data: [
            // 城市旅游热度数据
        ]
    }]
};

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

通过以上 10 个实用案例，相信你已经对 ECharts 地图图表的制作有了更深入的了解。在实际应用中，你可以根据自己的需求调整数据、样式和配置项，制作出更加精美的地图图表。祝你学习愉快！

分享到：
上一篇 早餐店如何吸引顾客？五大实用经营策略大揭秘
下一篇 昆山强买强卖事件：揭秘消费者权益受损，教你如何维权止损

相关文章

早餐店如何吸引顾客？五大实用经营策略大揭秘
2026-11-01
昆山工程模具加工：揭秘高效生产背后的秘密，案例解析助力企业提升竞争力
2026-11-01
昆山强买强卖事件：揭秘消费者权益受损，教你如何维权止损
2026-11-01
昆山模具加工，揭秘工程品质提升背后的秘密与技巧
2026-11-01