ajax 限制显示条数,echarts legend 限制规定显示个数

Document

var obj ={};var text_data = ['http://www.baidu.com', 'https://www.sogou.com', 'http://www.333.com','http://www.444.com', 'http://www.555.com', 'http://www.666.com', 'http://www.777.com','http://www.888.com', 'http://www.999.com', '外部链接总计'];for (var i = 0; i < text_data.length; i++) {if (i > 2 && (i < text_data.length - 1)) {

obj[text_data[i]]= false;

}else{

obj[text_data[i]]= true;

}

obj[text_data[text_data.length- 1]] = true;

}//console.log(obj)

var myChart = echarts.init(document.getElementById('all_line'));

myChart? myChart.clear() : "";

myChart.setOption({

tooltip: {

trigger:'axis',

backgroundColor:'rgba(255,255,255,0.8)',

axisPointer: {//坐标轴指示器，坐标轴触发有效

type: 'shadow', //默认为直线，可选为：'line' | 'shadow'

shadowStyle: {

color:'rgba(150,150,150,0.2)'}

},

textStyle: {

color:'#666',

fontSize:'14px',

},

extraCssText:'width:220px;height:60%;padding:0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);"',

formatter:function(params) {var htmlStr = "";for (var i = 0; i < params.length; i++) {var tem =params[i].name;var val =params[i].value;if (tem.indexOf('/') < 0) {

tem> 9 ? tem = tem + ":00 - " + tem + ":59" : tem = "0" + tem + ":00 - " +

"0" + tem + ":59";

}

val> 0 ? val = val : val = '--'htmlStr+=

'

' +

'' +

'' + params[i].seriesName + '' +

'' + val + '' + '

'}var res =

'

' +tem+ ' ' + $('.table-echarts ul.group li.cur').text() +

'

' + htmlStr + '

'

returnres;

},

},

textStyle: {

color:'rgb(120, 122, 125)',

},

color: ['#4fa8f9', '#6ec71e', '#f56e6a', '#fc8b40', '#818af8', '#31c9d7', '#f35e7a', '#ab7aee','#14d68b', '#cde5ff'],

grid: {

top:30, //越大越靠下，默认60

bottom: 70},

legend: {

bottom:1,

itemGap:15,

itemWidth:9,

itemHeight:10,

textStyle: {

padding: [0, 0, 0, 8],

},

formatter:function(name) {return (name.length > 14 ? (name.slice(0, 14) + "...") : name);

},

selected: obj,

data: text_data

},

xAxis: [{

type:'category',//boundaryGap: false,//坐标轴两边留白策略

axisTick: {

alignWithLabel:true},

axisLabel: {

interval:2},

axisLine: {

lineStyle: {

color:"#ddd"}

},

data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14','15', '16', '17', '18', '19', '20', '21', '22', '23'],

}],

yAxis: [{

type:'value',

axisLine: {

lineStyle: {

color:"transparent"}

},

splitLine: {

lineStyle: {

color:'#eee',

}

}

}],

series: [{

name:'http://www.baidu.com',

type:'line',

symbol:'circle',

symbolSize:'5',

data: [8, 1, 1, 0, 0, 3, 2, 0, 6, 3, 1, 4, 7, 3, 7, 15, 11, 3, 8, 3, 2, 5, 4, 7]

},

{

name:'https://www.sogou.com',

type:'line',

symbol:'circle',

symbolSize:'5',

data: [1, 1, 0, 0, 2, 1, 0, 1, 3, 1, 0, 0, 1, 0, 1, 1, 1, 0, 2, 2, 0, 4, 2, 4]

},

{

name:'http://www.333.com',

type:'line',

symbol:'circle',

symbolSize:'5',

data: [1, 3, 0, 0, 0, 1, 1, 0, 0, 1, 2, 1, 3, 1, 1, 1, 1, 0, 2, 0, 2, 1, 1, 1]

},

{

name:'http://www.444.com',

type:'line',

symbol:'circle',

symbolSize:'5',

data: [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 2, 3, 0, 0, 0, 3, 1, 0, 2, 0, 1, 0, 0]

},

{

name:'http://www.555.com',

type:'line',

symbol:'circle',

symbolSize:'5',

data: [0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1, 0, 1, 2, 0, 1, 1, 2, 0]

},

{

name:'http://www.666.com',

type:'line',

symbol:'circle',

symbolSize:'5',

data: [0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 1, 0, 0]

},

{

name:'http://www.777.com',

type:'line',

symbol:'circle',

symbolSize:'5',

data: [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 1]

},

{

name:'http://www.888.com',

type:'line',

symbol:'circle',

symbolSize:'5',

data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0]

},

{

name:'http://www.999.com',

type:'line',

symbol:'circle',

symbolSize:'5',

data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0]

},

{

name:'外部链接总计',

type:'bar',

barWidth:'60%',

data: [14, 6, 1, 0, 2, 5, 4, 1, 11, 8, 6, 7, 15, 5, 11, 21, 21, 6, 17, 7, 7, 14, 9, 14]

}

]

})//echarts点击事件

var oop = text_data.slice(0, 4);

myChart.on('legendselectchanged', function(params) {//console.log(params);

if (text_data.length > 4) {var legend_option = this.getOption();var selectArr =Object.values(params.selected)var num = 0;for (var i = 0; i < selectArr.length; i++) {

selectArr[i]=== true ? num++ : "";

}if (num > 4) {

oop.push(params.name);

}if (num > 6) {var hah = oop.slice(oop.length - 7, oop.length - 6)[0] + '';

legend_option.legend[0].selected[hah] = false;

}

}this.setOption(legend_option)

});

window.οnresize= function() {

myChart? myChart.resize() : "";

};