echart 餅圖圖例legend支持滑動

ps: 以下針對option操作

文章目錄

圖例過多加上滾動條
圖例形狀
圖例自定義顯示
圖例過多加上滾動條

 

legend:{
top:'50',
bottom:'50',
type:'scroll',
}

避免可能出現的翻頁下標錯亂,加上間距top / bottom屬性

圖例形狀

 

legend:{
data:legeData
}

legeData=[{name:'xx',value:100,icon:'circle'}];

其他擴展
http://echarts.baidu.com/option.html#legend.data.icon

圖例自定義顯示

 

legend:{
formatter:function(name){
var total = 0;
var target;
for (var i = 0, l = arr.length; i < l; i++) {
total += arr[i].value;
if (arr[i].name == name) {
target = arr[i].value;
}
}
return name + ' | ' +((target/total)*100).toFixed(2) + '%'+" "+target+" 條";
},
}

arr 為name,value 數組
formatter 為圖例函數擴展
---------------------
作者：lzty_天涯
來源：CSDN
原文：https://blog.csdn.net/qq_33129625/article/details/81328002
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！