echarts的X固定宽度滚动

ECharts是一款流行的JavaScript图表库，它支持各种类型的可视化展示，包括柱状图、折线图等。若要在ECharts中创建一个X轴固定宽度且可以滚动查看数据的场景，你可以使用它的`scrollbar`组件和`xAxis`配置。以下是基本步骤：

1. 首先，在初始化图表时，添加`scrollbar`组件到x轴部分：

   var myChart = echarts.init(document.getElementById('main'));

   var option = {
       xAxis: {
           type: 'category',
           data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
           scrollbar: { // 添加滚动条配置
               show: true, // 显示滚动条
               y: 'bottom', // 滚动条放置的位置
               orient: 'horizontal', // 水平滚动
           },
       },
       ...其他图表配置...
   };

2. 然后，设置适当的宽度限制以控制每个类别标签的宽度，这将使得X轴内容超出可视区域时可通过滚动条查看：

   xAxis: {
       boundaryGap: false, // 关闭默认间距
       width: '60%', // 设置X轴的总宽度，这里是一个示例值，根据实际需要调整
       splitLine: {
           lineStyle: {
               lineWidth: 0, // 可移除分割线以便更清晰地看到滚动效果
           }
       },
   },

3. 最后，调用`setOption`方法应用配置：

   myChart.setOption(option);