1. 柱条铺满区域
设置21条柱条的柱状图，修改为纵向排列，隐藏x轴、y轴的相关分割线，设置柱条宽度为barWidth=100%，网格grid上右下左均为0，让柱条填满整个区域。
2. 添加滚动效果
定义每页PAGE_SIZE=10条，添加滑动组件dataZoom，起始为startValue=0，结束为endValue=9，每隔一秒向下滑动1条。
此时有两个问题：
1. 柱条初始动画的影响
2. 最后一页和第一页承接不上
问题1，观察发现只有首尾柱条有影响，那么可以在首尾处额外新增空白柱条成为新的首尾柱条，并通过网格grid的上下设置来隐藏新增的空白柱条，为方便计算，新增的首尾柱条数都为一页的条数。
问题2，与banner图翻页类似，需要在最后一个拼接第一个作为过渡，即把第一页拼接到最后作为过渡页，当滑动到过渡页时，停止动画并还原滑动组件的初始位置后再重启动画。
3. 优化翻页效果
目前逐条滑动的效果不佳，需改成逐页滑动，定义间隔时间PAGE_TIME，通过下一页的条数计算翻页的滑动时间movingTime，即更新动画时长animationDurationUpdate=下一页的滑动时间=PAGE_TIME + movingTime。设置缓动效果为线性animationEasingUpdate=linear，隐藏滑动组件dataZoom。
4. 常量说明
const PAGE_SIZE = 10 // 每页个数
const SPACE_POWER = 2.5 // 空白倍数
const SPACE_SIZE = PAGE_SIZE * SPACE_POWER // 空白个数
const FIRST_END_SIZE = PAGE_SIZE + SPACE_SIZE * 2 - 1 // 第一页最后一个的索引
const TOP_BOTTOM = `-${SPACE_POWER * 100}%` // 上下偏移比例
const PAGE_TIME = 2000 // 翻页间隔时间
const animationDurationUpdate = 260 // 每条滑动时长
const animationEasingUpdate = 'linear' // 缓动效果
