Echart 地图放大缩小

在 ECharts 中，可以通过设置地图的 roam 属性以及相关事件监听来实现地图的放大、缩小功能。以下是实现地图放大缩小的常用方法：

---

1. 开启 roam 属性

roam 是 ECharts 地图组件中的一个重要属性，用于控制地图是否支持平移和缩放操作。

• roam: true：同时开启平移和缩放功能。
• roam: 'scale'：仅开启缩放功能。
• roam: 'move'：仅开启平移功能。
• roam: false：关闭平移和缩放功能（默认值）。

示例代码：

var chart = echarts.init(document.getElementById('main'));
var option = {
    geo: {
        map: 'china',
        roam: true, // 开启平移和缩放
        label: {
            show: true
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        }
    },
    series: []
};
chart.setOption(option);

---

2. 通过鼠标滚轮或手势缩放

当 roam 设置为 true 或 'scale' 时，用户可以通过以下方式缩放地图：

• PC 端：使用鼠标滚轮进行缩放。
• 移动端：使用双指手势进行缩放。

---

3. 设置初始缩放比例

可以通过 geo.zoom 属性设置地图的初始缩放比例。默认值为 1，数值越大，地图显示得越大。

示例代码：

var option = {
    geo: {
        map: 'china',
        roam: true,
        zoom: 1.2, // 初始放大 1.2 倍
        center: [104.114129, 37.550339], // 地图中心点（经纬度）
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        }
    },
    series: []
};
chart.setOption(option);

---

4. 通过按钮控制缩放

如果需要通过按钮或事件手动控制地图的缩放，可以使用 setOption 方法动态更新 geo.zoom 属性。

示例代码：

var chart = echarts.init(document.getElementById('main'));
var option = {
    geo: {
        map: 'china',
        roam: true,
        zoom: 1, // 初始缩放比例
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        }
    },
    series: []
};
chart.setOption(option);

// 放大按钮
document.getElementById('zoomIn').onclick = function () {
    var currentZoom = chart.getOption().geo[0].zoom || 1;
    chart.setOption({
        geo: {
            zoom: currentZoom + 0.2 // 放大 0.2 倍
        }
    });
};

// 缩小按钮
document.getElementById('zoomOut').onclick = function () {
    var currentZoom = chart.getOption().geo[0].zoom || 1;
    chart.setOption({
        geo: {
            zoom: currentZoom - 0.2 // 缩小 0.2 倍
        }
    });
};

HTML 部分：

<button id="zoomIn">放大</button>
<button id="zoomOut">缩小</button>
<div id="main" style="width: 600px; height: 400px;"></div>

---

5. 限制缩放范围

可以通过 geo.scaleLimit 属性限制地图的最小和最大缩放比例。

示例代码：

var option = {
    geo: {
        map: 'china',
        roam: true,
        zoom: 1,
        scaleLimit: {
            min: 0.5, // 最小缩放比例
            max: 3    // 最大缩放比例
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        }
    },
    series: []
};
chart.setOption(option);

---

6. 监听缩放和平移事件

可以通过 chart.on 方法监听地图的缩放和平移事件，例如 georoam 事件。

示例代码：

chart.on('georoam', function (params) {
    console.log('地图缩放或平移', params);
});

---

7. 结合 dataZoom 实现数据缩放

如果需要在地图上结合数据缩放（如数据窗口缩放），可以配合 dataZoom 组件使用，但这通常用于折线图、柱状图等，而非地图。

---

总结

• 开启缩放 ：设置 roam: true 或 'scale'。
• 初始缩放 ：通过 geo.zoom 设置。
• 动态缩放 ：通过按钮或事件动态更新 geo.zoom。
• 限制缩放范围 ：使用 geo.scaleLimit。
• 监听事件 ：使用 chart.on('georoam', callback)。

根据实际需求选择合适的方式即可实现地图的放大缩小功能。