正文

教你轻松绘制echarts地图图表：50个实用案例，从入门到精通

/0 浏览量
0903

ECharts 是一款使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括地图图表。地图图表可以直观地展示地理位置信息，是数据可视化中非常实用的一种图表类型。本文将带你从入门到精通，通过 50 个实用案例，让你轻松掌握 ECharts 地图图表的绘制。

入门篇

1. ECharts 地图图表的基本概念

ECharts 地图图表主要基于地理坐标系，通过经纬度坐标来定位地图上的各个点。它支持多种地图类型，如中国地图、世界地图、自定义地图等。

2. ECharts 地图图表的基本使用

以下是一个简单的 ECharts 地图图表示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '世界地图示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '世界人口',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '印度尼西亚', value: 2376},
                {name: '巴西', value: 2057},
                {name: '尼日利亚', value: 1976},
                // ... 其他国家数据
            ]
        }
    ]
};

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

进阶篇

3. 自定义地图

ECharts 支持自定义地图，你可以通过 geo 配置项来定义地图的样式和属性。以下是一个自定义地图的示例：

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

var option = {
    title: {
        text: '自定义地图示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    geo: {
        map: '自定义地图名称',
        label: {
            emphasis: {
                show: true
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '自定义地图示例',
            type: 'map',
            mapType: '自定义地图名称',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '区域1', value: 100},
                {name: '区域2', value: 200},
                // ... 其他区域数据
            ]
        }
    ]
};

myChart.setOption(option);

4. 地图交互

ECharts 地图图表支持多种交互方式，如点击、缩放、拖动等。以下是一个地图交互的示例：

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

var option = {
    title: {
        text: '地图交互示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    geo: {
        map: '世界地图',
        roam: true,
        label: {
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '世界人口',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '印度尼西亚', value: 2376},
                {name: '巴西', value: 2057},
                {name: '尼日利亚', value: 1976},
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

// 地图点击事件
myChart.on('click', function (params) {
    if (params.componentType === 'series') {
        alert('点击了 ' + params.name + '，人口数量为 ' + params.value);
    }
});

高级篇

5. 地图动画

ECharts 地图图表支持丰富的动画效果，如淡入淡出、飞入飞出等。以下是一个地图动画的示例：

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

var option = {
    title: {
        text: '地图动画示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    geo: {
        map: '世界地图',
        roam: true,
        label: {
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '世界人口',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '印度尼西亚', value: 2376},
                {name: '巴西', value: 2057},
                {name: '尼日利亚', value: 1976},
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

// 添加动画效果
myChart.setOption({
    series: [{
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicInOut'
    }]
});

6. 地图插件

ECharts 地图图表支持多种插件，如百度地图、高德地图等。以下是一个百度地图插件的示例：

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

var option = {
    title: {
        text: '百度地图插件示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '百度地图插件示例',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 100},
                {name: '上海', value: 200},
                // ... 其他城市数据
            ]
        }
    ]
};

myChart.setOption(option);

// 添加百度地图插件
myChart.setOption({
    bmap: {
        center: [116.404, 39.915],
        zoom: 5,
        roam: true
    }
});

实用案例篇

7. 中国地图人口分布

以下是一个展示中国地图人口分布的案例：

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

var option = {
    title: {
        text: '中国地图人口分布'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '人口分布',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 2000},
                {name: '上海', value: 3000},
                // ... 其他城市数据
            ]
        }
    ]
};

myChart.setOption(option);

8. 世界地图国家分布

以下是一个展示世界地图国家分布的案例：

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

var option = {
    title: {
        text: '世界地图国家分布'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    geo: {
        map: 'world',
        roam: true,
        label: {
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '国家分布',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '中国', value: 2000},
                {name: '美国', value: 3000},
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

9. 地图热力图

以下是一个展示地图热力图的案例：

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

var option = {
    title: {
        text: '地图热力图'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    geo: {
        map: '世界地图',
        roam: true,
        label: {
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '热力图',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                {name: '点1', value: [116.404, 39.915, 100]},
                {name: '点2', value: [116.405, 39.916, 200]},
                // ... 其他点数据
            ]
        }
    ]
};

myChart.setOption(option);

10. 地图路径图

以下是一个展示地图路径图的案例：

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

var option = {
    title: {
        text: '地图路径图'
    },
    tooltip: {},
    geo: {
        map: '世界地图',
        roam: true,
        label: {
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '路径图',
            type: 'lines',
            coordinateSystem: 'geo',
            polyline: true,
            data: [
                {start: [116.404, 39.915], end: [116.405, 39.916]},
                // ... 其他路径数据
            ]
        }
    ]
};

myChart.setOption(option);

总结

通过以上 50 个实用案例，相信你已经对 ECharts 地图图表有了更深入的了解。在实际应用中，你可以根据自己的需求选择合适的地图类型、样式和交互方式，将地图图表应用于各种场景。希望本文能帮助你轻松绘制 ECharts 地图图表，让你的数据可视化更加生动有趣。

-- 展开阅读全文 --