Echatrs dataZoom实现左右滑动与放大缩小 并精确控制显示几条数据

使用dataZoom可以将数据滚动显示

官方示例代码如下:

https://echarts.apache.org/examples/zh/editor.html?c=doc-example/bar-dataZoom-filterMode

你会发现官方给出的代码控制的是显示百分比,有时候我想精确控制显示后几条数据或者前几条数据

那么代码如下:
以下代码为显示后5条

  //zongji.data.length是横轴的长度
  var start = zongji.data.length - 5;
  var end = zongji.data.length - 1;

	dataZoom: [
		{
	      type: 'slider',
	      show: true,
	      startValue: start,
	      endValue: end,
	      handleSize: 8,
	    },
	]

以上的关键:startValue、endValue

start与end是控制百分比

startValue与endValue是使用数量精确控制

有时候读一遍官方给的文档开发效率会高很多

你可能感兴趣的:(Echatrs dataZoom实现左右滑动与放大缩小 并精确控制显示几条数据)