在 ECharts 中，通过行为（Action）你可以实现对图表的交互操作，例如缩放、拖拽、数据视图等。ECharts 提供了一系列的行为，可以通过配置启用这些交互。以下是一些常见的图表行为：

1. 数据区域缩放

数据区域缩放允许用户通过拖动选择区域来放大或缩小图表的显示范围。
option = {
    dataZoom: [
        {
            type: 'slider', // 滑动条型
            start: 0,
            end: 100
        },
        {
            type: 'inside', // 内部缩放
            start: 0,
            end: 100
        }
    ],
    // 其他配置项...
};

2. 平移漫游

平移漫游允许用户通过拖动来移动图表的视窗，改变显示范围。
option = {
    dataZoom: [
        {
            type: 'slider', // 滑动条型
            start: 0,
            end: 100,
            zoomLock: true // 锁定缩放比例
        },
        {
            type: 'inside', // 内部缩放
            start: 0,
            end: 100,
            zoomLock: true // 锁定缩放比例
        }
    ],
    // 其他配置项...
};

3. 数据视图

数据视图允许用户查看图表的原始数据，并可以进行编辑。
option = {
    dataZoom: [
        {
            type: 'slider', // 滑动条型
            start: 0,
            end: 100
        },
        {
            type: 'inside', // 内部缩放
            start: 0,
            end: 100
        }
    ],
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: { // 数据视图
                readOnly: false
            },
            saveAsImage: {} // 保存为图片
            // ...其他工具
        }
    },
    // 其他配置项...
};

4. 鼠标缩放和漫游
option = {
    grid: {
        left: '10%',
        right: '10%',
        top: '10%',
        bottom: '10%'
    },
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
        }
    },
    // 其他配置项...
};

5. 其他行为

除了上述的行为之外，ECharts 还提供了其他的行为，比如框选、多轴切换等，具体可以根据实际需求在配置项中添加相应的属性。
option = {
    brush: {
        toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
        xAxisIndex: 0
    },
    // 其他配置项...
};

通过配置这些行为，你可以为图表提供更丰富的交互性，使用户能够更灵活地浏览和分析数据。详细的行为配置可以在 ECharts 的[官方文档](https://echarts.apache.org/zh/option.html#toolbox.feature)中找到。


转载请注明出处：http://www.zyzy.cn/article/detail/5076/ECharts