在ECharts中，如果横坐标的数据太多，你可以通过添加dataZoom组件来实现拖动效果，dataZoom组件提供了数据区域的缩放和平移交互功能，可以使用户在查看数据详情的同时，保持大局观。以下是一个基本的示例：

var option = {
    // ...
    dataZoom: [{
        type: 'slider', // 这是一个滑动条类型的dataZoom组件
        start: 0, // 左边在 0% 的位置
        end: 10, // 右边在 10% 的位置
    }],
    xAxis: {
        // ...
    },
    // ...
}

你的代码中添加dataZoom组件可以像这样：

var option = {
        // ...
        dataZoom: [{
          type: 'slider', 
          start: 0, 
          end: 10,
        }],
        xAxis: {
          // ...
        },
        // ...
}

start 和 end 是初始化的百分比位置，取值在 0-100 之间。这样一来，你的图表就会出现一个可拖动的滑动条，通过它，用户可以选择他们感兴趣的数据范围，其余的数据将会被暂时隐藏起来。如果你想要显示更多或者更少的数据，你可以通过调整 start 和 end 的值来实现。

自定义文字样式

ECharts 的 dataZoom 组件支持自定义样式，包括文字样式。你可以在 dataZoom 中设置 textStyle 属性来调整文字的颜色、字体大小等样式。以下是一个基本示例：

dataZoom: [{
  type: 'slider',
  start: 0,
  end: 20,
  height: 15,
  bottom: 10,
  textStyle: {
    color: '#8392A5',
    fontSize: 10
  }
}],

这个示例将滑块的文字颜色设置为 '#8392A5'，字体大小设置为 10。