vue 移动端 echarts 柱状图或折线图数据一页展示固定条数，且数据从右向左滑动。

在进行移动端项目开发时，曾遇到这样的一个业务场景，有一个图表模块的开发，使用第三方组件echarts进行开发，统计图以时间为维度进行数据展示，可视区域固定展示3条数据，初始化时展示的最新日期的数据，用户可以从右向左滑动查看其他日期的数据。具体参考图片如下：

遇到的问题：

1、固定条数展示；

2、初始化时页面以最新的日期数据为起始展示数据，用户向左滑动可以看其他日期的数据；

解决方法：

查看完相应的api后，dataZoom配置可以实现响应的功能，具体配置如下：

const data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
option = {
  xAxis: {
    type: 'category',
    data
  },
  dataZoom: [
    {
      show: false,
      startValue: data.length - 3 // 数据展示的开始位置，从结束结束位置项前展示三条
    },
    {
      zoomOnMouseWheel: false, // 控制可以左右滑动
      type: 'inside' // 隐藏底部默认的滑动条
    }
  ],
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};复制

以上配置放入 Examples - Apache ECharts 可进行预览查看效果