教你用ECharts轻松制作地图图表：30个实用案例解析

在数据可视化领域，地图图表因其直观性和地理信息的丰富性而备受青睐。ECharts，作为国内优秀的前端图表库，提供了强大的地图图表绘制功能。本文将带您通过30个实用案例，轻松掌握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)}
        ]
    }]
};

myChart.setOption(option);

案例二：世界地图的绘制

除了中国地图，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: '美国', 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'
    },
    series: [{
        name: '自定义',
        type: 'map',
        mapType: 'custom',
        label: {
            show: true
        },
        data: [
            {name: '区域一', value: Math.round(Math.random() * 1000)},
            {name: '区域二', value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例四：热力地图的绘制

热力地图可以直观地展示数据的密集程度。

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

var option = {
    title: {
        text: '热力地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '热力',
        type: 'heatmap',
        data: [
            [1, 2, 3],
            [2, 3, 4],
            [3, 4, 5]
        ]
    }]
};

myChart.setOption(option);

案例五：多级地图的绘制

对于层级较多的地图，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)}
        ],
        levels: [
            {
                itemStyle: {
                    areaColor: '#ff7f50',
                    borderColor: '#ff7f50'
                }
            },
            {
                itemStyle: {
                    areaColor: '#87cefa',
                    borderColor: '#87cefa'
                }
            }
        ]
    }]
};

myChart.setOption(option);

案例六：带有标签的地图

在地图上添加标签，可以更加直观地展示数据。

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}: {c}'
        },
        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'
    },
    series: [{
        name: '动画',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)}
        ],
        animation: true
    }]
};

myChart.setOption(option);

案例八：地图上的自定义形状

ECharts地图图表支持自定义形状，例如绘制一个省份的轮廓。

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

var option = {
    title: {
        text: '自定义形状地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '形状',
        type: 'map',
        mapType: 'custom',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)}
        ],
        regions: [{
            name: '北京',
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1,
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    }]
};

myChart.setOption(option);

案例九：地图上的自定义颜色

自定义颜色可以使地图更加美观。

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)}
        ],
        itemStyle: {
            normal: {
                areaColor: '#87cefa',
                borderColor: '#fff'
            }
        }
    }]
};

myChart.setOption(option);

案例十：地图上的自定义边框

自定义边框可以使地图更加突出。

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)}
        ],
        itemStyle: {
            normal: {
                areaColor: '#87cefa',
                borderColor: '#fff',
                borderWidth: 2
            }
        }
    }]
};

myChart.setOption(option);

案例十一：地图上的自定义阴影

自定义阴影可以使地图更加立体。

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)}
        ],
        itemStyle: {
            normal: {
                areaColor: '#87cefa',
                borderColor: '#fff',
                borderWidth: 2,
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

myChart.setOption(option);

案例十二：地图上的自定义标签位置

自定义标签位置可以使地图更加美观。

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

var option = {
    title: {
        text: '自定义标签位置地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '标签位置',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            position: 'inside'
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例十三：地图上的自定义标签内容

自定义标签内容可以使地图更加丰富。

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} - {c}'
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例十四：地图上的自定义标签格式

自定义标签格式可以使地图更加美观。

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

var option = {
    title: {
        text: '自定义标签格式地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '标签格式',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            formatter: [
                '{a|{b}}',
                '{c|{c}}'
            ].join('\n'),
            rich: {
                a: {
                    color: '#333',
                    lineHeight: 24
                },
                c: {
                    color: '#f00',
                    lineHeight: 24
                }
            }
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例十五：地图上的自定义标签阴影

自定义标签阴影可以使地图更加立体。

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

var option = {
    title: {
        text: '自定义标签阴影地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '标签阴影',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            position: 'inside',
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例十六：地图上的自定义标签边框

自定义标签边框可以使地图更加美观。

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

var option = {
    title: {
        text: '自定义标签边框地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '标签边框',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            position: 'inside',
            borderColor: '#fff',
            borderWidth: 2
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例十七：地图上的自定义标签阴影颜色

自定义标签阴影颜色可以使地图更加美观。

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

var option = {
    title: {
        text: '自定义标签阴影颜色地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '标签阴影颜色',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            position: 'inside',
            shadowBlur: 10,
            shadowColor: 'rgba(255, 0, 0, 0.5)'
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例十八：地图上的自定义标签边框颜色

自定义标签边框颜色可以使地图更加美观。

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

var option = {
    title: {
        text: '自定义标签边框颜色地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '标签边框颜色',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            position: 'inside',
            borderColor: '#f00',
            borderWidth: 2
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例十九：地图上的自定义标签字体颜色

自定义标签字体颜色可以使地图更加美观。

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

var option = {
    title: {
        text: '自定义标签字体颜色地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '标签字体颜色',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            position: 'inside',
            color: '#f00'
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例二十：地图上的自定义标签字体大小

自定义标签字体大小可以使地图更加美观。

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

var option = {
    title: {
        text: '自定义标签字体大小地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '标签字体大小',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            position: 'inside',
            fontSize: 16
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例二十一：地图上的自定义标签行间距

自定义标签行间距可以使地图更加美观。

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

var option = {
    title: {
        text: '自定义标签行间距地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '标签行间距',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            position: 'inside',
            lineHeight: 24
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例二十二：地图上的自定义标签背景颜色

自定义标签背景颜色可以使地图更加美观。

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

var option = {
    title: {
        text: '自定义标签背景颜色地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '标签背景颜色',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            position: 'inside',
            backgroundColor: '#fff'
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例二十三：地图上的自定义标签边框样式

自定义标签边框样式可以使地图更加美观。

”`javascript var myChart = echarts.init(document.getElementById(‘main’));

var option = {

title: {
    text: '自定义标签边框样式地图'
},
tooltip: {
    trigger: