正文

教你用 ECharts 快速上手地图图表，四大经典案例详解！

/0 浏览量
0624

ECharts 是一款功能强大的可视化库，它可以帮助开发者轻松地创建各种类型的图表，包括地图图表。地图图表在展示地理信息、区域分布等方面具有独特的优势。下面，我将通过四大经典案例，带你快速上手 ECharts 地图图表的制作。

一、案例一：中国地图图表

1.1 准备工作

首先，确保你的项目中已经引入了 ECharts 库。你可以通过以下代码实现：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>

1.2 数据准备

接下来，你需要准备中国地图的数据。这里我们可以使用 ECharts 内置的中国地图数据，或者从其他数据源获取。

var geoCoordMap = {
    '北京': [116.46, 39.92],
    '上海': [121.48, 31.22],
    // ... 其他城市
};

1.3 ECharts 配置

下面是一个简单的中国地图图表配置示例：

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

var option = {
    title: {
        text: '中国地图图表',
        subtext: '示例',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92, 100]},
                {name: '上海', value: [121.48, 31.22, 80]},
                // ... 其他城市
            ],
            symbolSize: function (val) {
                return val[2] / 10;
            },
            label: {
                normal: {
                    formatter: '{b}: {c}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: 'rgba(100, 100, 100, 0.5)'
                }
            }
        }
    ]
};

myChart.setOption(option);

二、案例二：世界地图图表

2.1 准备工作

与世界地图图表制作类似，首先需要引入 ECharts 库。

2.2 数据准备

这里我们同样可以使用 ECharts 内置的世界地图数据。

var geoCoordMap = {
    '北京': [116.46, 39.92],
    '纽约': [-74.13, 40.71],
    // ... 其他城市
};

2.3 ECharts 配置

下面是一个简单的世界地图图表配置示例：

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

var option = {
    // ... 其他配置
    geo: {
        map: 'world',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        // ... 其他系列
    ]
};

myChart.setOption(option);

三、案例三：省市区地图图表

3.1 准备工作

引入 ECharts 库。

3.2 数据准备

这里我们可以使用 ECharts 内置的省市区地图数据。

var geoCoordMap = {
    '北京市': [116.46, 39.92],
    '上海市': [121.48, 31.22],
    // ... 其他城市
};

3.3 ECharts 配置

下面是一个简单的省市区地图图表配置示例：

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

var option = {
    // ... 其他配置
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        // ... 其他系列
    ]
};

myChart.setOption(option);

四、案例四：自定义地图图表

4.1 准备工作

引入 ECharts 库。

4.2 数据准备

这里我们需要准备自定义地图的数据，包括坐标、区域等。

var geoCoordMap = {
    '点A': [116.46, 39.92],
    '点B': [121.48, 31.22],
    // ... 其他点
};

4.3 ECharts 配置

下面是一个简单的自定义地图图表配置示例：

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

var option = {
    // ... 其他配置
    geo: {
        map: '自定义地图',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        // ... 其他系列
    ]
};

myChart.setOption(option);

通过以上四个案例，相信你已经对 ECharts 地图图表的制作有了初步的了解。在实际应用中，你可以根据自己的需求，对 ECharts 地图图表进行个性化的定制和优化。希望这篇文章能帮助你快速上手 ECharts 地图图表的制作！

-- 展开阅读全文 --