echartsx轴滚动条

要在 ECharts 中添加 X 轴滚动条，可以使用 dataZoom 组件。具体步骤如下：

1. 在 ECharts 的 option 中添加 dataZoom 组件：

option = {
    ...
    dataZoom: {
        type: 'slider',    // 设置滚动条的类型为 slider
        xAxisIndex: 0,     // 设置滚动条控制的 X 轴索引
        start: 0,          // 设置滚动条开始位置
        end: 100           // 设置滚动条结束位置
    },
    ...
}

2. 设置 X 轴的 type 为 'category'，并且设置 boundaryGap 为 false：

option = {
    ...
    xAxis: {
        type: 'category',  // 设置 X 轴的类型为 category
        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
        boundaryGap: false // 设置 boundaryGap 为 false
    },
    ...
}

3. 如果数据量很大，可以在 X 轴上设置 axisLabel 的 interval 属性，来控制 X 轴标签的显示间隔：

option = {
    ...
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
        boundaryGap: false,
        axisLabel: {
            interval: 0   // 设置 X 轴标签全部显示
        }
    },
    ...
}

通过以上设置，就可以在 ECharts 中添加 X 轴滚动条了。