echarts柱状体滚动 不要放大缩小

ECharts是一个强大的数据可视化库，对于柱状图滚动，你可以创建一个固定宽度的图表区域，并通过设置x轴的scrollX属性以及dataZoom组件来实现水平滚动查看柱状图数据，而不是传统的放大缩小功能。

以下是基本步骤：

1. 创建柱状图容器，设置固定的宽度，例如：

<div id="main" style="width: 800px; height: 600px;"></div>

2. 初始化ECharts实例并配置选项，禁用zoom（缩放）：

var myChart = echarts.init(document.getElementById('main'), 'bar', {
    zoom: false,
    dataZoom: [{
        show: true,
        type: 'slider', // 使用滑块作为数据区域选择工具
        start: 0,
        end: 100, // 设置最大滚动范围为当前数据长度
        xAxisIndex: 0, // 指定滚动的是哪一组x轴
    }],
});

3. 加载数据并绘制图表：

// 假设data是一个包含x轴和y轴数据的对象数组
myChart.setOption({
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E', 'F'], // x轴数据
    },
    yAxis: {},
    series: [
        { // 柱状图系列
            data: [1, 2, 3, 4, 5, 6], // y轴数据
        },
    ],
});

这样，你就得到了一个可以左右滚动查看柱状图数据但不会自动放大的视图。