Echarts【1、數據過多導致顯示不全分頁，2、數據展示探討分析】

var len=<c:out value="${len }"></c:out>;
var dataZoom_end=null; //為空默認100%所以默認顯示5個是能顯示下的
if(len >5 ){
var dataZoom_end = (5/len)*100;
}else if(len<5){
var dataZoom_end = (5/len)*100;
}
var jdxzktj = echarts.init(document.getElementById('jdx'));
// 指定圖表的配置項和數據
var jdxzktj_option = {
minInterval : 1,
title : {
text : '接地線掛設情況統計',
x : 'center'
},
tooltip : {},
xAxis : {
data : ${zrdwSet},
type : 'category',
axisLabel:{
interval: 0
}

},
dataZoom: [
{
start:0,
end:dataZoom_end,
type: 'slider',
show: true,
xAxisIndex: [0],
handleSize: 0,
height: 10,
left: '10%',
right: '10%',
bottom: 26,
borderColor: "#000",
fillerColor: '#269cdb',
borderRadius:5,
backgroundColor: '#33384b',
showDataShadow: false,
showDetail: false,
realtime:true,
filterMode: 'filter',
},
{
type: 'inside',
show: true,
xAxisIndex: [0],
start: 0,
end:dataZoom_end,
},
],
yAxis : {},
legend : {
data : ${sjzdList},
bottom : [ 0 ]
},
series : ${zkTjData},
color : [ "#1397DC", "#12C1EC", "#6FE498", "#E2E2E2", "#3CB2EF",
"#71F6F9", "#3EE486", "#FFF065" ]
};
// 使用剛指定的配置項和數據顯示圖表。
jdxzktj.setOption(jdxzktj_option);

 

 后台封裝

 

 

 

 

前端封裝