新手必看！轻松上手echarts地图图表制作，30个实用案例教学

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括地图图表。地图图表在数据可视化中尤为重要，因为它可以帮助用户直观地理解地理分布和空间关系。对于新手来说，掌握 ECharts 地图图表的制作是一个很有价值的技能。本文将为你提供 30 个实用案例，帮助你轻松上手 ECharts 地图图表制作。

案例一：中国地图

主题句：从基础的中国地图开始，了解 ECharts 地图图表的基本用法。

代码示例：

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

var option = {
    title: {
        text: '中国地图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他省份数据
            ]
        }
    ]
};

myChart.setOption(option);

案例二：世界地图

主题句：扩展到世界地图，学习如何添加不同国家和地区的数据。

代码示例：

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

var option = {
    title: {
        text: '世界地图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            label: {
                show: true
            },
            data: [
                {name: 'China', value: Math.round(Math.random() * 1000)},
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

案例三：自定义地图

主题句：学习如何使用自定义地图数据。

代码示例：

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

var option = {
    title: {
        text: '自定义地图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    series: [
        {
            name: '自定义地图',
            type: 'map',
            mapType: 'custom',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)}
            ],
            // 添加自定义地图数据
            regions: [{
                name: '北京',
                itemStyle: {
                    normal: {
                        borderColor: '#323c48',
                        borderWidth: 1,
                        areaColor: '#323c48'
                    }
                }
            }]
        }
    ]
};

myChart.setOption(option);

案例四：多层级地图

主题句：探索多层级地图，实现更复杂的数据展示。

代码示例：

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

var option = {
    title: {
        text: '多层级地图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    series: [
        {
            name: '多层级地图',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他省份数据
            ],
            // 添加多层级效果
            levels: [
                {itemStyle: {areaColor: '#f4e925'}},
                {itemStyle: {areaColor: '#f27a1c'}},
                {itemStyle: {areaColor: '#e5323e'}}
            ]
        }
    ]
};

myChart.setOption(option);

案例五：动态地图

主题句：学习如何创建动态变化的地图图表。

代码示例：

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

var option = {
    title: {
        text: '动态地图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    series: [
        {
            name: '动态地图',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)}
            ],
            // 添加动态效果
            animation: true,
            animationDuration: 1000
        }
    ]
};

myChart.setOption(option);

案例六：地图交互

主题句：了解地图交互功能，提升用户体验。

代码示例：

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

var option = {
    title: {
        text: '地图交互示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    series: [
        {
            name: '地图交互',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)}
            ],
            // 添加交互效果
            zoom: {
                show: true,
                type: 'inside',
                start: 1,
                end: 5
            }
        }
    ]
};

myChart.setOption(option);

案例七：地图热力图

主题句：使用热力图展示数据密集型地图。

代码示例：

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

var option = {
    title: {
        text: '地图热力图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    series: [
        {
            name: '地图热力图',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 1000)]},
                // ... 其他点数据
            ],
            // 热力图样式
            pointSize: 10,
            blurSize: 30
        }
    ]
};

myChart.setOption(option);

案例八：地图雷达图

主题句：结合雷达图展示多维数据。

代码示例：

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

var option = {
    title: {
        text: '地图雷达图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    series: [
        {
            name: '地图雷达图',
            type: 'radar',
            data: [
                {
                    name: '北京',
                    value: [10, 20, 30, 40, 50]
                }
            ],
            // 雷达图样式
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(255,255,255,0.1)', 'rgba(200,200,200,0.2)', 'rgba(150,150,150,0.3)', 'rgba(100,100,100,0.4)', 'rgba(50,50,50,0.5)']
                }
            }
        }
    ]
};

myChart.setOption(option);

案例九：地图散点图

主题句：散点图在地图上的应用，展示空间分布。

代码示例：

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

var option = {
    title: {
        text: '地图散点图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    series: [
        {
            name: '地图散点图',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 1000)]},
                // ... 其他点数据
            ],
            // 散点图样式
            symbolSize: 10,
            emphasis: {
                itemStyle: {
                    borderColor: 'rgba(255,215,0,1)',
                    borderWidth: 2
                }
            }
        }
    ]
};

myChart.setOption(option);

案例十：地图柱状图

主题句：柱状图在地图上的应用，展示区域数据。

代码示例：

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

var option = {
    title: {
        text: '地图柱状图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    series: [
        {
            name: '地图柱状图',
            type: 'bar',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他省份数据
            ],
            // 柱状图样式
            itemStyle: {
                color: '#facc14'
            }
        }
    ]
};

myChart.setOption(option);

案例十一：地图折线图

主题句：折线图在地图上的应用，展示趋势变化。

代码示例：

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

var option = {
    title: {
        text: '地图折线图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    series: [
        {
            name: '地图折线图',
            type: 'line',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [Math.round(Math.random() * 1000)]},
                // ... 其他省份数据
            ],
            // 折线图样式
            symbol: 'none',
            connectNulls: false
        }
    ]
};

myChart.setOption(option);

案例十二：地图饼图

主题句：饼图在地图上的应用，展示比例分布。

代码示例：

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

var option = {
    title: {
        text: '地图饼图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    series: [
        {
            name: '地图饼图',
            type: 'pie',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他省份数据
            ],
            // 饼图样式
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            }
        }
    ]
};

myChart.setOption(option);

案例十三：地图地图

主题句：将多个地图叠加，展示更复杂的数据。

代码示例：

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

var option = {
    title: {
        text: '地图地图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    series: [
        {
            name: '地图1',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)}
            ]
        },
        {
            name: '地图2',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '上海', value: Math.round(Math.random() * 1000)}
            ]
        }
    ]
};

myChart.setOption(option);

案例十四：地图地图交互

主题句：实现多个地图之间的交互效果。

代码示例：

var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));

var option1 = {
    // ... 地图1配置
};

var option2 = {
    // ... 地图2配置
};

myChart1.setOption(option1);
myChart2.setOption(option2);

// 实现交互效果
myChart1.on('click', function (params) {
    if (params.componentType === 'series') {
        myChart2.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: params.dataIndex
        });
    }
});

myChart2.on('click', function (params) {
    if (params.componentType === 'series') {
        myChart1.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: params.dataIndex
        });
    }
});

案例十五：地图数据动态更新

主题句：学习如何动态更新地图数据。

代码示例：

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

var option = {
    // ... 地图配置
};

myChart.setOption(option);

// 动态更新数据
setInterval(function () {
    var newData = [
        {name: '北京', value: Math.round(Math.random() * 1000)}
    ];
    myChart.setOption({
        series: [{
            data: newData
        }]
    });
}, 1000);

案例十六：地图地图动画

主题句：添加地图动画效果，提升用户体验。

代码示例：

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

var option = {
    // ... 地图配置
};

myChart.setOption(option);

// 添加动画效果
myChart.showLoading();
setTimeout(function () {
    myChart.setOption(option);
    myChart.hideLoading();
}, 2000);

案例十七：地图地图交互动画

主题句：实现地图交互动画效果。

代码示例：

var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));

var option1 = {
    // ... 地图1配置
};

var option2 = {
    // ... 地图2配置
};

myChart1.setOption(option1);
myChart2.setOption(option2);

// 实现交互动画效果
myChart1.on('click', function (params) {
    if (params.componentType === 'series') {
        myChart2.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: params.dataIndex
        });
        myChart2.showLoading();
        setTimeout(function () {
            myChart2.setOption(option2);
            myChart2.hideLoading();
        }, 2000);
    }
});

案例十八：地图地图数据过滤

主题句：学习如何过滤地图数据。

代码示例：

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

var option = {
    // ... 地图配置
};

myChart.setOption(option);

// 过滤数据
function filterData(filter) {
    var newData = option.series[0].data.filter(function (item) {
        return filter(item.name);
    });
    myChart.setOption({
        series: [{
            data: newData
        }]
    });
}

// 示例：只显示北京和上海的数据
filterData(function (name) {
    return name === '北京' || name === '上海';
});

案例十九：地图地图数据排序

主题句：学习如何对地图数据进行排序。

代码示例：

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

var option = {
    // ... 地图配置
};

myChart.setOption(option);

// 排序数据
function sortData() {
    option.series[0].data.sort(function (a, b) {
        return b.value - a.value;
    });
    myChart.setOption(option);
}

sortData();

案例二十：地图地图数据聚合

主题句：学习如何对地图数据进行聚合。

代码示例：

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

var option = {
    // ... 地图配置
};

myChart.setOption(option);

// 聚合数据
function aggregateData() {
    var newData = option.series[0].data.reduce(function (prev, curr) {
        if (prev[curr.name]) {
            prev[curr.name].value += curr.value;
        } else {
            prev[curr.name] = {
                name: curr.name,
                value: curr.value
            };
        }
        return prev;
    }, {});

    myChart.setOption({
        series: [{
            data: Object.values(newData)
        }]
    });
}

aggregateData();

案例二十一：地图地图数据可视化

主题句：学习如何将地图数据可视化。

代码示例：

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

var option = {
    // ... 地图配置
};

myChart.setOption(option);

// 可视化数据
function visualizeData() {
    var max = option.series[0].data.reduce(function (prev, curr) {
        return Math.max(prev, curr.value);
    }, 0);

    option.series[0].data.forEach(function (item) {
        item.itemStyle = {
            color: echarts.color.lerp(item.value / max, ['#323c48', '#e5323e'])
        };
    });

    myChart.setOption(option);
}

visualizeData();

案例二十二：地图地图数据导出

主题句：学习如何导出地图数据。

代码示例：

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

var option = {

// ... 地图配置

};

myChart.setOption(option);

// 导出数据 function exportData() {

var data = option.series[0].data.map(function (item) {