Similarly Baidu statistics, sometimes more legend of the number, but the front end of the need to control the number of initialization displayed, as well as the largest number of display, look at renderings:
Give the code:
,
'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;
}
// the console.log (obj)
var myChart = echarts.init (document.getElementById ( 'all_line' ));
myChart myChart.clear ():? "" ;
MyChart.setOption ({
ToolTip: {
Trigger: 'Axis' ,
the backgroundColor: 'RGBA (255,255,255,0.8)' ,
axisPointer: { // axis indicator axis valid trigger
type: 'Shadow', // default is linear, optionally: '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 +=
'<div style="height:26px;line-height:26px;overflow:hidden;padding:6px 8px;">' +
'<span style="float:left;max-width:160px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">' +
'<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
params[i].color + ';"></span>' + params[i].seriesName + '</span>' +
'<span style="float:right">' + val + '</span>' + '</div>'
}
var res =
'<div><div style="height:40px;line-height:40px;padding:0 8px;background:rgba(237,233,233,0.4)">' +
tem + '<span style="float:right;">' + $('.table-echarts ul.group li.cur').text() +
'</span>' + htmlStr + '</div></div>'
return res;
},
},
textStyle: {
Color: 'RGB (120, 122, 125)' ,
},
color: [ '# 4fa8f9', '# 6ec71e', '# f56e6a', '# fc8b40', '# 818af8', '# 31c9d7', '# f35e7a ',' # ab7aee ' ,
' # 14d68b ',' # cde5ff '
],
Grid: {
Top: 30, // greater on the lower, default 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: to false, // coordinate axes on both sides of blank policy
axisTick: {
alignWithLabel: to true
},
AxisLabel: {
interval The: 2
},
axisLine: {
the 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: 'external links Total' ,
type: 'bar' ,
barWidth: ' 60% ' ,
Data: [ 14,. 6,. 1, 0, 2,. 5,. 4,. 1,. 11,. 8,. 6,. 7, 15,. 5,. 11, 21 is, 21 is,. 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.onresize = function () {
myChart ? myChart.resize() : "";
};
</script>
</body>
</html>
Direct copy will be able to see the effect. The above is to limit the initial display of legend of the first three and the last one, the user clicks the display up to six. Of course, you can modify the parameters of the number of their own definition.
Tips：
- The above data are virtual, just for the convenience of viewing.
- In order not to affect the scope of variables, it is recommended to put jquery js function inside the ready.