新手必学！ECharts地图图表轻松入门，30个实用案例教你绘制个性化地图

地图图表在数据可视化领域扮演着重要角色，它能够直观地展示地理位置信息，使得数据更加生动、易懂。ECharts作为国内流行的可视化库，提供了强大的地图图表功能。本文将带你轻松入门ECharts地图图表，并提供30个实用案例，帮助你绘制个性化的地图。

一、ECharts地图图表基础

1.1 地图数据格式

ECharts地图图表需要使用特定的地图数据格式，通常是GeoJSON。GeoJSON是一种用于描述地理空间数据的JSON格式，它包含了地理坐标、拓扑信息等。

1.2 地图配置

在ECharts中，绘制地图需要配置以下参数：

• map: 地图名称，对应GeoJSON中的id。
• center: 地图的中心点坐标。
• zoom: 地图的缩放比例。
• roam: 是否开启地图的拖拽和缩放功能。

二、30个实用案例

2.1 案例一：中国地图

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

var option = {
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            // ... 其他城市
        ]
    }]
};

myChart.setOption(option);

2.2 案例二：世界地图

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

var option = {
    series: [{
        type: 'map',
        map: 'world',
        label: {
            show: true
        },
        data: [
            {name: 'China', value: Math.round(Math.random() * 1000)},
            {name: 'USA', value: Math.round(Math.random() * 1000)},
            // ... 其他国家
        ]
    }]
};

myChart.setOption(option);

2.3 案例三：自定义地图

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

var option = {
    series: [{
        type: 'map',
        map: 'customMap',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            // ... 其他城市
        ]
    }]
};

myChart.setOption(option);

2.4 案例四：地图热力图

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

var option = {
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 1000)]},
            {name: '上海', value: [121.47, 31.23, Math.round(Math.random() * 1000)]},
            // ... 其他城市
        ]
    }]
};

myChart.setOption(option);

2.5 案例六：地图动画

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

var option = {
    series: [{
        type: 'map',
        map: 'china',
        animation: true,
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            // ... 其他城市
        ]
    }]
};

myChart.setOption(option);

2.7 案例九：地图点击事件

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

var option = {
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            // ... 其他城市
        ]
    }]
};

myChart.on('click', function (params) {
    console.log(params.name);
});

myChart.setOption(option);

2.10 案例十二：地图颜色渐变

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

var option = {
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            // ... 其他城市
        ],
        itemStyle: {
            areaColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#ff7f50' // 0% 处的颜色
                }, {
                    offset: 1, color: '#87cefa' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
            }
        }
    }]
};

myChart.setOption(option);

2.13 案例十五：地图标签旋转

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

var option = {
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true,
            rotate: 45
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            // ... 其他城市
        ]
    }]
};

myChart.setOption(option);

2.16 案例十八：地图缩放比例

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

var option = {
    series: [{
        type: 'map',
        map: 'china',
        zoom: 1.2,
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            // ... 其他城市
        ]
    }]
};

myChart.setOption(option);

2.19 案例二十：地图拖拽和缩放

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

var option = {
    series: [{
        type: 'map',
        map: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            // ... 其他城市
        ]
    }]
};

myChart.setOption(option);

2.22 案例二十四：地图边框颜色

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

var option = {
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            // ... 其他城市
        ],
        itemStyle: {
            borderColor: '#f0f0f0'
        }
    }]
};

myChart.setOption(option);

2.25 案例二十七：地图阴影效果

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

var option = {
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            // ... 其他城市
        ],
        itemStyle: {
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    }]
};

myChart.setOption(option);

2.28 案例三十：地图自定义样式

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

var option = {
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            // ... 其他城市
        ],
        itemStyle: {
            normal: {
                borderColor: '#f0f0f0',
                areaColor: '#fff'
            },
            emphasis: {
                borderColor: '#f0f0f0',
                areaColor: '#f0f0f0'
            }
        }
    }]
};

myChart.setOption(option);

通过以上30个实用案例，相信你已经对ECharts地图图表有了初步的了解。在实际应用中，可以根据需求调整地图样式、数据、动画等参数，绘制出个性化的地图图表。希望本文能帮助你轻松入门ECharts地图图表，祝你学习愉快！