新手必学:用ECharts轻松绘制地图图表,10个实用案例解析

2026-11-12 0 阅读

案例一:中国地图展示

ECharts 提供了丰富的地图数据,可以轻松绘制中国地图。以下是一个简单的示例:

// 引入 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'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '上海',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '广东',
            value: Math.round(Math.random() * 1000)
        }]
    }]
};

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

案例二:世界地图展示

ECharts 同样支持世界地图的绘制。以下是一个简单的示例:

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '世界地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '世界',
        type: 'map',
        mapType: 'world',
        label: {
            show: true
        },
        data: [{
            name: 'United States',
            value: Math.round(Math.random() * 1000)
        }, {
            name: 'China',
            value: Math.round(Math.random() * 1000)
        }]
    }]
};

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

案例三:省级地图展示

ECharts 支持自定义地图数据,以下是一个省级地图的示例:

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入自定义地图数据
require('echarts/map/js/province');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '省级地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '省级地图',
        type: 'map',
        mapType: 'province',
        label: {
            show: true
        },
        data: [{
            name: '北京市',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '上海市',
            value: Math.round(Math.random() * 1000)
        }]
    }]
};

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

案例四:城市地图展示

ECharts 支持绘制城市地图,以下是一个城市地图的示例:

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入自定义地图数据
require('echarts/map/js/city');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '城市地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '城市地图',
        type: 'map',
        mapType: 'city',
        label: {
            show: true
        },
        data: [{
            name: '北京市',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '上海市',
            value: Math.round(Math.random() * 1000)
        }]
    }]
};

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

案例五:热力地图展示

ECharts 支持绘制热力地图,以下是一个热力地图的示例:

”`javascript // 引入 ECharts 主模块 var echarts = require(‘echarts/lib/echarts’); // 引入热力地图数据 require(‘echarts/map/js/heatmap’);

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

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

title: {
    text: '热力地图示例'
},
tooltip: {
    trigger: 'item'
},
series: [{
    name: '热力地图',
    type: 'heatmap',
    data: [
        [0, 0, 1],
        [1, 0, 2],
        [2, 0, 3],
        [3, 0, 4],
        [4, 0, 5],
        [5, 0, 6],
        [6, 0, 7],
        [7, 0, 8],
        [8, 0, 9],
        [9, 0, 10],
        [10, 0, 11],
        [11, 0, 12],
        [12, 0, 13],
        [13, 0, 14],
        [14, 0, 15],
        [15, 0, 16],
        [16, 0, 17],
        [17, 0, 18],
        [18, 0, 19],
        [19, 0, 20],
        [20, 0, 21],
        [21, 0, 22],
        [22, 0, 23],
        [23, 0, 24],
        [0, 1, 1],
        [1, 1, 2],
        [2, 1, 3],
        [3, 1, 4],
        [4, 1, 5],
        [5, 1, 6],
        [6, 1, 7],
        [7, 1, 8],
        [8, 1, 9],
        [9, 1, 10],
        [10, 1, 11],
        [11, 1, 12],
        [12, 1, 13],
        [13, 1, 14],
        [14, 1, 15],
        [15, 1, 16],
        [16, 1, 17],
        [17, 1, 18],
        [18, 1, 19],
        [19, 1, 20],
        [20, 1, 21],
        [21, 1, 22],
        [22, 1, 23],
        [23, 1, 24],
        [0, 2, 1],
        [1, 2, 2],
        [2, 2, 3],
        [3, 2, 4],
        [4, 2, 5],
        [5, 2, 6],
        [6, 2, 7],
        [7, 2, 8],
        [8, 2, 9],
        [9, 2, 10],
        [10, 2, 11],
        [11, 2, 12],
        [12, 2, 13],
        [13, 2, 14],
        [14, 2, 15],
        [15, 2, 16],
        [16, 2, 17],
        [17, 2, 18],
        [18, 2, 19],
        [19, 2, 20],
        [20, 2, 21],
        [21, 2, 22],
        [22, 2, 23],
        [23, 2, 24],
        [0, 3, 1],
        [1, 3, 2],
        [2, 3, 3],
        [3, 3, 4],
        [4, 3, 5],
        [5, 3, 6],
        [6, 3, 7],
        [7, 3, 8],
        [8, 3, 9],
        [9, 3, 10],
        [10, 3, 11],
        [11, 3, 12],
        [12, 3, 13],
        [13, 3, 14],
        [14, 3, 15],
        [15, 3, 16],
        [16, 3, 17],
        [17, 3, 18],
        [18, 3, 19],
        [19, 3, 20],
        [20, 3, 21],
        [21, 3, 22],
        [22, 3, 23],
        [23, 3, 24],
        [0, 4, 1],
        [1, 4, 2],
        [2, 4, 3],
        [3, 4, 4],
        [4, 4, 5],
        [5, 4, 6],
        [6, 4, 7],
        [7, 4, 8],
        [8, 4, 9],
        [9, 4, 10],
        [10, 4, 11],
        [11, 4, 12],
        [12, 4, 13],
        [13, 4, 14],
        [14, 4, 15],
        [15, 4, 16],
        [16, 4, 17],
        [17, 4, 18],
        [18, 4, 19],
        [19, 4, 20],
        [20, 4, 21],
        [21, 4, 22],
        [22, 4, 23],
        [23, 4, 24],
        [0, 5, 1],
        [1, 5, 2],
        [2, 5, 3],
        [3, 5, 4],
        [4, 5, 5],
        [5, 5, 6],
        [6, 5, 7],
        [7, 5, 8],
        [8, 5, 9],
        [9, 5, 10],
        [10, 5, 11],
        [11, 5, 12],
        [12, 5, 13],
        [13, 5, 14],
        [14, 5, 15],
        [15, 5, 16],
        [16, 5, 17],
        [17, 5, 18],
        [18, 5, 19],
        [19, 5, 20],
        [20, 5, 21],
        [21, 5, 22],
        [22, 5, 23],
        [23, 5, 24],
        [0, 6, 1],
        [1, 6, 2],
        [2, 6, 3],
        [3, 6, 4],
        [4, 6, 5],
        [5, 6, 6],
        [6, 6, 7],
        [7, 6, 8],
        [8, 6, 9],
        [9, 6, 10],
        [10, 6, 11],
        [11, 6, 12],
        [12, 6, 13],
        [13, 6, 14],
        [14, 6, 15],
        [15, 6, 16],
        [16, 6, 17],
        [17, 6, 18],
        [18, 6, 19],
        [19, 6, 20],
        [20, 6, 21],
        [21, 6, 22],
        [22, 6, 23],
        [23, 6, 24],
        [0, 7, 1],
        [1, 7, 2],
        [2, 7, 3],
        [3, 7, 4],
        [4, 7, 5],
        [5, 7, 6],
        [6, 7, 7],
        [7, 7, 8],
        [8, 7, 9],
        [9, 7, 10],
        [10, 7, 11],
        [11, 7, 12],
        [12, 7, 13],
        [13, 7, 14],
        [14, 7, 15],
        [15, 7, 16],
        [16, 7, 17],
        [17, 7, 18],
        [18, 7, 19],
        [19, 7, 20],
        [20, 7, 21],
        [21, 7, 22],
        [22, 7, 23],
        [23, 7, 24],
        [0, 8, 1],
        [1, 8, 2],
        [2, 8, 3],
        [3, 8, 4],
        [4, 8, 5],
        [5, 8, 6],
        [6, 8, 7],
        [7, 8, 8],
        [8, 8, 9],
        [9, 8, 10],
        [10, 8, 11],
        [11, 8, 12],
        [12, 8, 13],
        [13, 8, 14],
        [14, 8, 15],
        [15, 8, 16],
        [16, 8, 17],
        [17, 8, 18],
        [18, 8, 19],
        [19, 8, 20],
        [20, 8, 21],
        [21, 8, 22],
        [22, 8, 23],
        [23, 8, 24],
        [0, 9, 1],
        [1, 9, 2],
        [2, 9, 3],
        [3, 9, 4],
        [4, 9, 5],
        [5, 9, 6],
        [6, 9, 7],
        [7, 9, 8],
        [8, 9, 9],
        [9, 9, 10],
        [10, 9, 11],
        [11, 9, 12],
        [12, 9, 13],
        [13, 9, 14],
        [14, 9, 15],
        [15, 9, 16],
        [16, 9, 17],
        [17, 9, 18],
        [18, 9, 19],
        [19, 9, 20],
        [20, 9, 21],
        [21, 9, 22],
        [22, 9, 23],
        [23, 9, 24],
        [0, 10, 1],
        [1, 10, 2],
        [2, 10, 3],
        [3, 10, 4],
        [4, 10, 5],
        [5, 10, 6],
        [6, 10, 7],
        [7, 10, 8],
        [8, 10, 9],
        [9, 10, 10],
        [10, 10, 11],
        [11, 10, 12],
        [12, 10, 13],
        [13, 10, 14],
        [14, 10, 15],
        [15, 10, 16],
        [16, 10, 17],
        [17, 10, 18],
        [18, 10, 19],
        [19, 10, 20],
        [20, 10, 21],
        [21, 10, 22],
        [22, 10, 23],
        [23, 10, 24],
        [0, 11, 1],
        [1, 11, 2],
        [2, 11, 3],
        [3, 11, 4],
        [4, 11, 5],
        [5, 11, 6],
        [6, 11, 7],
        [7, 11, 8],
        [8, 11, 9],
        [9, 11, 10],
        [10, 11, 11],
        [11, 11, 12],
        [12, 11, 13],
        [13, 11, 14],
        [14, 11, 15],
        [15, 11, 16],
        [16, 11, 17],
        [17, 11, 18],
        [18, 11, 19],
        [19, 11, 20],
        [20, 11, 21],
        [21, 11, 22],
        [22, 11, 23],
        [23, 11, 24],
        [0, 12, 1],
        [1, 12, 2],
        [2, 12, 3],
        [3, 12, 4],
        [4, 12, 5],
        [5, 12
分享到: