echarts双柱状图双X轴循环滚动

ECharts是一个强大的JavaScript数据可视化库，它支持创建各种复杂的图表，包括双柱状图和拥有两个独立X轴的图表。双X轴循环滚动功能通常用于比较两个维度的数据，比如时间序列分析中，一边展示日期，另一边展示某个指标的变化。

在ECharts中，你可以通过设置`xAxis`数组和`axisPointer`配置来实现这种效果：

var option = {
  xAxis: [
    { type: 'category', data: ['A', 'B', 'C', 'D', 'E'], position: 'top' }, // 上侧轴
    { type: 'category', data: [1, 2, 3, 4, 5], position: 'bottom' }   // 下侧轴
  ],
  yAxis: [
    { type: 'value' },
    { type: 'value' }
  ],
  series: [
    {
      name: '值一',
      type: 'bar',
      stack: '总量',
      data: [[1, 2, 3, 4, 5], [10, 20, 30, 40, 50]]
    },
    {
      name: '值二',
      type: 'bar',
      stack: '总量',
      data: [[6, 7, 8, 9, 10], [60, 70, 80, 90, 100]]
    }
  ],
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  axisPointer: { // 设置联动
    type: 'line'
  },
  // 设置双轴的联动和滚动
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      link: {
        x: 'all',
        y: { first: true } // 指定下侧轴为主轴
      }
    }
  }
};

// 初始化图表并渲染
echarts.init(document.getElementById('main')).setOption(option);

在这个例子中，上侧轴用于时间或者其他分类，下侧轴用于数值对比。当鼠标滑动时，两个轴会联动，用户可以顺畅地浏览数据。