echarts dataZoom x轴数据过多时候 默认展示后10个数据

echarts 官网 https://echarts.apache.org/zh/option.html#dataZoom-slider.endValue

轴类型为category dataZoom 的startValue 与 endValue 的值 可以为 axis的数组的索引 从而 放弃使用 dataZoom的 start 与 end 的 0~100的范围值，更好的实现默认展示后10个数据的功能

 

 

解决实现代码如下：

//this.xDataArr 为x 轴数据

const dataOption = {
  color: color,
  xAxis: {
    data: this.xDataArr
  },
  legend: {
    data: legendArr
  },
  dataZoom: [
    {
      type: 'slider',
      startValue: this.xDataArr.length - 9, // 展示后10个数据的索引
      endValue: this.xDataArr.length // 展示全部数据
    }
  ],
  series: seriesArr
}

实现结果 如图：