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

发布时间 2023-11-08 11:00:29作者: 凉城i

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

轴类型为category dataZoom 的startValueendValue 的值 可以为 axis的数组的索引 从而 放弃使用 dataZoom的 startend 的 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
}

实现结果 如图: