轻松掌握echarts地图图表：30个实用案例教你绘制数据地图

引言

在数据可视化领域，地图图表因其直观性和地理信息关联性，成为了展示地理数据的重要工具。ECharts作为国内流行的开源可视化库，提供了强大的地图图表绘制功能。本文将通过30个实用案例，带领大家轻松掌握ECharts地图图表的绘制技巧。

案例一：中国地图的绘制

// 引入ECharts主模块
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true
        },
        data: [
            {name: '北京',value: Math.round(Math.random()*1000)},
            {name: '上海',value: Math.round(Math.random()*1000)},
            // ... 其他省份
        ]
    }]
};

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

案例二：世界地图的绘制

// 引入ECharts主模块
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '世界地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '世界',
        type: 'map',
        mapType: 'world',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '阿富汗',value: Math.round(Math.random()*1000)},
            {name: '阿根廷',value: Math.round(Math.random()*1000)},
            // ... 其他国家
        ]
    }]
};

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

案例三：自定义地图的绘制

// 引入ECharts主模块
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '自定义地图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '自定义地图',
        type: 'map',
        mapType: 'custom', // 自定义地图类型
        roam: false,
        label: {
            show: true
        },
        data: [
            {name: '区域1',value: Math.round(Math.random()*1000)},
            {name: '区域2',value: Math.round(Math.random()*1000)},
            // ... 其他区域
        ],
        // 自定义区域数据
        geoCoord: {
            '区域1': [116.3912,39.9093],
            '区域2': [121.4737,31.2311],
            // ... 其他区域
        }
    }]
};

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

案例四：热力图地图的绘制

// 引入ECharts主模块
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '热力图地图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '热力图地图',
        type: 'heatmap',
        data: [
            [116.3912,39.9093, 100],
            [121.4737,31.2311, 90],
            // ... 其他数据点
        ],
        coordinateSystem: 'geo',
        geoIndex: 0,
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            emphasis: {
                label: {
                    show: true
                }
            }
        }
    }]
};

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

案例五：散点图地图的绘制

// 引入ECharts主模块
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '散点图地图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '散点图地图',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [
            [116.3912,39.9093, 100],
            [121.4737,31.2311, 90],
            // ... 其他数据点
        ],
        symbolSize: function (val) {
            return val / 10;
        },
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            emphasis: {
                label: {
                    show: true
                }
            }
        }
    }]
};

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

案例六：饼图地图的绘制

// 引入ECharts主模块
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '饼图地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '饼图地图',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
            normal: {
                show: false,
                position: 'center'
            },
            emphasis: {
                show: true,
                textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            }
        },
        labelLine: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        },
        data: [
            {value: 335, name: '区域1'},
            {value: 310, name: '区域2'},
            // ... 其他区域
        ]
    }]
};

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

案例七：柱状图地图的绘制

// 引入ECharts主模块
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '柱状图地图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['区域1', '区域2', '区域3', '区域4', '区域5']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '销量',
            type: 'bar',
            data: [120, 200, 150, 80, 70]
        }
    ]
};

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

案例八：折线图地图的绘制

// 引入ECharts主模块
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '折线图地图'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['销量']
    },
    xAxis: [
        {
            type: 'category',
            data: ['区域1', '区域2', '区域3', '区域4', '区域5']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '销量',
            type: 'line',
            data: [120, 200, 150, 80, 70]
        }
    ]
};

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

案例九：雷达图地图的绘制

// 引入ECharts主模块
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '雷达图地图'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['销量']
    },
    radar: [
        {
            indicator: [
                {name: '区域1', max: 6500},
                {name: '区域2', max: 16000},
                {name: '区域3', max: 30000},
                {name: '区域4', max: 38000},
                {name: '区域5', max: 52000},
                {name: '区域6', max: 25000}
            ]
        }
    ],
    series: [
        {
            name: '销量',
            type: 'radar',
            data: [
                {
                    value: [20000, 19000, 30000, 38000, 52000, 25000],
                    name: '销量'
                }
            ]
        }
    ]
};

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

案例十：K线图地图的绘制

// 引入ECharts主模块
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: 'K线图地图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['区域1', '区域2', '区域3', '区域4', '区域5']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '销量',
            type: 'k',
            data: [
                [120, 200, 150, 80, 70]
            ]
        }
    ]
};

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

案例十一：地图缩放与平移

// 引入ECharts主模块
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图缩放与平移'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '地图',
        type: 'map',
        mapType: 'china',
        roam: true, // 开启地图缩放和平移
        label: {
            show: true
        },
        data: [
            {name: '北京',value: Math.round(Math.random()*1000)},
            {name: '上海',value: Math.round(Math.random()*1000)},
            // ... 其他省份
        ]
    }]
};

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

案例十二：地图标注

// 引入ECharts主模块
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图标注'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '地图',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京',value: Math.round(Math.random()*1000)},
            {name: '上海',value: Math.round(Math.random()*1000)},
            // ... 其他省份
        ],
        markPoint: {
            symbolSize: 50,
            data: [
                {name: '北京',value: 100},
                {name: '上海',value: 90},
                // ... 其他标记点
            ]
        }
    }]
};

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

案例十三：地图事件监听

// 引入ECharts主模块
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图事件监听'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '地图',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京',value: Math.round(Math.random()*1000)},
            {name: '上海',value: Math.round(Math.random()*1000)},
            // ... 其他省份
        ],
        markPoint: {
            symbolSize: 50,
            data: [
                {name: '北京',value: 100},
                {name: '上海',value: 90},
                // ... 其他标记点
            ]
        }
    }]
};

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

// 监听点击事件
myChart.on('click', function (params) {
    if (params.componentType === 'series') {
        alert(params.name + ' 被点击');
    }
});

案例十四：地图动画

// 引入ECharts主模块
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图动画'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '地图',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京',value: Math.round(Math.random()*1000)},
            {name: '上海',value: Math.round(Math.random()*1000)},
            // ... 其他省份
        ],
        markPoint: {
            symbolSize: 50,
            data: [
                {name: '北京',value: 100},
                {name: '上海',value: 90},
                // ... 其他标记点
            ]
        },
        animation: true // 开启动画效果
    }]
};

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

案例十五：地图自定义样式

”`javascript // 引入ECharts主模块 var myChart = echarts.init(document.getElementById(‘main’));

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

title: {
    text: '地图自定义样式'
},
tooltip: {
    trigger: 'item'
},
visualMap: {
    min: 0,
    max: 100,
    left: 'left',
    top: 'bottom',
    text: ['高','低'],           // 文本，默认为数值文本
    calculable: true
},
series: [{
    name: '地图',
    type: 'map',