轻松上手echarts地图图表：50个实用案例，轻松绘制可视化地图！

在当今数据可视化领域，地图图表因其直观性和实用性而备受青睐。ECharts 是一款强大的开源可视化库，支持丰富的图表类型，其中包括地图图表。本篇文章将为你提供50个实用案例，帮助你轻松上手 ECharts 地图图表的制作。

1. 世界地图案例

使用 ECharts 绘制世界地图，展示全球各国或地区的分布情况。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '世界地图示例'
    },
    tooltip: {},
    series: [{
        name: '世界',
        type: 'map',
        mapType: 'world',
        roam: true,
        label: {
            show: false
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ]
    }]
};

myChart.setOption(option);

2. 中国地图案例

绘制中国地图，展示中国各省份或城市的分布情况。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '中国地图示例'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: false
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ]
    }]
};

myChart.setOption(option);

3. 省级地图案例

以某个省份为基准，绘制省级地图，展示该省份各市的分布情况。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '省级地图示例'
    },
    tooltip: {},
    series: [{
        name: '省份',
        type: 'map',
        mapType: 'provinceName',
        roam: true,
        label: {
            show: false
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ]
    }]
};

myChart.setOption(option);

4. 城市地图案例

以某个城市为基准，绘制城市地图，展示该城市各区的分布情况。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '城市地图示例'
    },
    tooltip: {},
    series: [{
        name: '城市',
        type: 'map',
        mapType: 'cityName',
        roam: true,
        label: {
            show: false
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ]
    }]
};

myChart.setOption(option);

5. 热力地图案例

以某个区域为基准，绘制热力地图，展示该区域内不同数值的分布情况。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '热力地图示例'
    },
    tooltip: {},
    series: [{
        name: '热力地图',
        type: 'heatmap',
        data: [
            // 数据示例
        ]
    }]
};

myChart.setOption(option);

6. 地图动画案例

为地图添加动画效果，使地图在展示过程中更加生动。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图动画示例'
    },
    tooltip: {},
    series: [{
        name: '地图动画',
        type: 'map',
        mapType: 'china',
        roam: true,
        animation: true,
        label: {
            show: false
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ]
    }]
};

myChart.setOption(option);

7. 地图缩放案例

为地图添加缩放功能，使用户可以自由缩放地图。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图缩放示例'
    },
    tooltip: {},
    series: [{
        name: '地图缩放',
        type: 'map',
        mapType: 'china',
        roam: true,
        zoom: 1.2,
        label: {
            show: false
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ]
    }]
};

myChart.setOption(option);

8. 地图点击事件案例

为地图添加点击事件，实现点击地图区域时，显示相应信息。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图点击事件示例'
    },
    tooltip: {},
    series: [{
        name: '地图点击事件',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ]
    }]
};

myChart.on('click', function (params) {
    console.log(params.name); // 输出点击区域的名称
});

myChart.setOption(option);

9. 地图联动案例

实现多个地图之间的联动，当一个地图区域被点击时，其他地图也会相应地高亮显示。

// 示例代码
var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));

var option1 = {
    // ... (与案例8相同)
};

var option2 = {
    // ... (与案例8相同)
};

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

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

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

10. 地图自定义案例

自定义地图样式，如添加图标、文字、阴影等。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图自定义示例'
    },
    tooltip: {},
    series: [{
        name: '地图自定义',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            formatter: '{b}'
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ],
        markPoint: {
            symbol: 'pin',
            symbolSize: 50,
            data: [
                // 数据示例
            ]
        }
    }]
};

myChart.setOption(option);

11. 地图数据可视化案例

使用地图图表展示数据，如人口、GDP、灾害分布等。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图数据可视化示例'
    },
    tooltip: {},
    series: [{
        name: '数据可视化',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            formatter: '{b}: {c}'
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ]
    }]
};

myChart.setOption(option);

12. 地图交互案例

实现地图交互功能，如点击地图区域跳转页面、弹出信息框等。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图交互示例'
    },
    tooltip: {},
    series: [{
        name: '地图交互',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            formatter: '{b}'
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ]
    }]
};

myChart.on('click', function (params) {
    // 实现点击跳转页面、弹出信息框等功能
});

myChart.setOption(option);

13. 地图多维度数据展示案例

在地图上展示多维度数据，如人口、GDP、环境质量等。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图多维度数据展示示例'
    },
    tooltip: {},
    series: [{
        name: '多维度数据展示',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            formatter: '{b}: {c}'
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ]
    }]
};

myChart.setOption(option);

14. 地图数据实时更新案例

实现地图数据的实时更新，如股票行情、天气预报等。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图数据实时更新示例'
    },
    tooltip: {},
    series: [{
        name: '实时更新',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            formatter: '{b}: {c}'
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ]
    }]
};

// 实现数据实时更新
setInterval(function () {
    // 更新数据
    myChart.setOption({
        series: [{
            data: [
                // 更新后的数据
            ]
        }]
    });
}, 1000);

myChart.setOption(option);

15. 地图自定义颜色案例

自定义地图颜色，根据数据值设置不同颜色。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图自定义颜色示例'
    },
    tooltip: {},
    series: [{
        name: '自定义颜色',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            formatter: '{b}: {c}'
        },
        itemStyle: {
            areaColor: function (params) {
                // 根据数据值设置颜色
                return params.value > 1000 ? '#f00' : '#0f0';
            },
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ]
    }]
};

myChart.setOption(option);

16. 地图渐变色案例

为地图添加渐变色效果，使地图更加美观。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图渐变色示例'
    },
    tooltip: {},
    series: [{
        name: '渐变色',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            formatter: '{b}: {c}'
        },
        itemStyle: {
            areaColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: '#f00' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#0f0' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
            },
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ]
    }]
};

myChart.setOption(option);

17. 地图阴影案例

为地图添加阴影效果，使地图更加立体。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图阴影示例'
    },
    tooltip: {},
    series: [{
        name: '阴影',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            formatter: '{b}: {c}'
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111',
            shadowBlur: 10,
            shadowColor: '#333',
            shadowOffsetY: 5
        },
        data: [
            // 数据示例
        ]
    }]
};

myChart.setOption(option);

18. 地图透明度案例

设置地图透明度，使地图更加具有层次感。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图透明度示例'
    },
    tooltip: {},
    series: [{
        name: '透明度',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            formatter: '{b}: {c}'
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111',
            opacity: 0.5
        },
        data: [
            // 数据示例
        ]
    }]
};

myChart.setOption(option);

19. 地图缩放限制案例

设置地图缩放限制，防止用户过度缩放地图。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图缩放限制示例'
    },
    tooltip: {},
    series: [{
        name: '缩放限制',
        type: 'map',
        mapType: 'china',
        roam: true,
        zoom: 1.2,
        label: {
            show: true,
            formatter: '{b}: {c}'
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ]
    }]
};

myChart.setOption(option);

20. 地图拖拽案例

实现地图拖拽功能，使地图可以随意拖动。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图拖拽示例'
    },
    tooltip: {},
    series: [{
        name: '拖拽',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            formatter: '{b}: {c}'
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ]
    }]
};

myChart.setOption(option);

21. 地图联动缩放案例

实现多个地图之间的联动缩放，使多个地图保持一致的比例。

// 示例代码
var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));

var option1 = {
    // ... (与案例20相同)
};

var option2 = {
    // ... (与案例20相同)
};

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

myChart1.on('click', function (params) {
    myChart2.dispatchAction({
        type: 'zoomTo',
        seriesIndex: 0,
        dataIndex: params.dataIndex
    });
});

myChart2.on('click', function (params) {
    myChart1.dispatchAction({
        type: 'zoomTo',
        seriesIndex: 0,
        dataIndex: params.dataIndex
    });
});

22. 地图自定义标注案例

自定义地图标注，如添加图标、文字、阴影等。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图自定义标注示例'
    },
    tooltip: {},
    series: [{
        name: '自定义标注',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            formatter: '{b}'
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        data: [
            // 数据示例
        ],
        markPoint: {
            symbol: 'pin',
            symbolSize: 50,
            data: [
                // 数据示例
            ]
        }
    }]
};

myChart.setOption(option);

23. 地图点击事件联动案例

实现地图点击事件联动，当一个地图区域被点击时，其他地图也会相应地高亮显示。

”`javascript // 示例代码 var myChart1 = echarts.init(document.getElementById(‘main1’)); var myChart2 = echarts.init(document.getElementById(‘main2’));

var option1 = {

// ... (与案例22相同)

};

var option2 = {

// ... (与案例22相同)

};

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

myChart1.on(‘click’, function (params) {

myChart2.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: params.dataIndex