echarts 笛卡尔坐标系关系图 拖动和缩放

在 ECharts 中，可以通过“dataZoom”组件实现坐标轴的缩放和拖动。具体步骤如下：

1. 在 option 中配置“dataZoom”组件。

dataZoom: [{
    type: 'slider', // 表示滑动条型数据区域缩放组件
    xAxisIndex: 0, // 表示控制第一个（index 为 0）x 轴
    start: 0, // 表示缩放范围的起点，取值范围为 0-100
    end: 100 // 表示缩放范围的终点，取值范围为 0-100
}]

2. 在 option 中配置“toolbox”组件。

toolbox: {
    feature: {
        dataZoom: { // 表示开启数据区域缩放功能
            yAxisIndex: false // 表示不控制 y 轴
        },
        restore: {} // 表示开启重置功能
    }
}

具体代码示例：

option = {
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line'
    }],
    dataZoom: [{
        type: 'slider',
        xAxisIndex: 0,
        start: 0,
        end: 100
    }],
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: false
            },
            restore: {}
        }
    }
};

这样就可以通过鼠标拖动或滑动条来进行坐标轴的缩放和拖动了。