使用echarts的datazoom属性的start和end来设置滚动条的长度来控制数据的条数,其他滚动显示。控制滚动条的长度使用到“三目”运算方法:
1、以下代码直接引入到渲染柱状图的JS中
var xArraylength = data.xArray.length;//获取返回数据的个数
dataZoom: [
{
type: 'slider',
show: true,
handleSize: 2,
height: '15px',
start:0 ,
end: computedPosition(1,xArraylength)//xArraylength是x轴返回的数据的个数
},
{
type: 'inside',
start: 40,
end: 100
},
{
type: 'slider',
show: false,
yAxisIndex: 0,
filterMode: 'empty',
width: 3,
height: '70%',
handleSize: 2,
showDataShadow: false,
left: '93%'
}
]
2、写三目运算方法,控制滚动条长度
function computedPosition(length,xArraylength) {
if(xArraylength>=10){
return length <= 10 ? this.end = 35 : this.end = (100 - Math.floor(35 / length * 100));
}else{
return 100;//小于十条数据显示全部
}
}