echarts餅狀圖數據太多
echarts 餅狀圖內容太多怎么處理
有些時候，我們餅狀圖中echarts的數據可能會很多。
這個時候展示肯定會密密麻麻的。導致顯示很凌亂
我們需要'翻頁'類似表格展示下一頁的數據
在legend中下需要配置屬性 type: 'scroll',表示滾動
數據太多可以滾動的形式進展示
如下：
legend: {
type: 'scroll',
}
自定義分頁箭頭
但是我們發現這個分頁箭頭不好看。
所以我們需要優化這個分頁的箭頭
通過官網的描述信息我們配置如下這只
這里設置箭頭的路徑
var option = {
legend: {
type: 'scroll', 滾動
orient: 'vertical', 垂直方向滾動
pageIcons: {
vertical: [
'path://M472.064 272.448l-399.232 399.232c-22.08 22.08-22.08 57.792 0 79.872 22.016 22.016 57.792 22.08 79.872 0L512 392.256l359.296 359.296c22.016 22.016 57.792 22.08 79.872 0 22.08-22.08 22.016-57.792 0-79.872L551.936 272.448C529.856 250.432 494.144 250.432 472.064 272.448z',
'path://M472.064 751.552 72.832 352.32c-22.08-22.08-22.08-57.792 0-79.872 22.016-22.016 57.792-22.08 79.872 0L512 631.744l359.296-359.296c22.016-22.016 57.792-22.08 79.872 0 22.08 22.08 22.016 57.792 0 79.872l-399.232 399.232C529.856 773.568 494.144 773.568 472.064 751.552z',
],
},
pageButtonPosition: 'end', // 翻頁的位置。'start'：控制塊在左或上,end控制塊在右或下。
pageIconColor: '#29bca8', // 可以點擊的翻頁按鈕顏色
pageIconInactiveColor: '#7f7f7f', // 禁用的按鈕顏色
pageIconSize: 14, //這當然就是按鈕的大小
}
}
有的小伙伴會好奇
path的值怎么來的，我是從svg中獲取的，
如何在iconfont中獲取圖標的svg代碼
pageIcons 的值哪些？
第1種：svg的代碼,就是我剛剛使用的
第2種:URL為圖片鏈接例如：'image://http://xxx.xxx.xxx/a/b.png'
第3種:URL為dataURI 例如：
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUh
wFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
定義legend的顯示內容樣式的設置
在legend下有一個formatter屬性
我們可以通過 formatter 來自定義文字
formatter: function(name) {
let showNum
let percentage
for (var i = 0; i < listSummary.length; i++) {
if (listSummary[i].name == name) {
showNum = listSummary[i].value
if (lejibaoxiuTotals) { //lejibaoxiuTotals可能為0
// 計算百分比
percentage =((listSummary[i].value /lejibaoxiuTotals) *100).toFixed(2) + '%'
} else {
percentage = ''
}
}
}
return `{name| ${ name.length > 5 ? name.slice(0, 5) + '...' : name}}
| {val| ${percentage}} {numNum| ${showNum}}`
},
通過富文本來控制樣式
textStyle: {
fontSize: 13, //字體的大小
color: '#D9D9D9',
rich: {
//設置name屬性的樣式(顯示的:華為x)，這里與 return中的name保持一致
name: {
color: '#595959',
width: 77, //寬度
padding: [0, 0, 0, 0], //間距表示 上右下左
},
//設置val(百分比)屬性的樣式，這里與 return中的val保持一致
val: {
width: 50,//寬度
color: '#8c8c8c', 、
padding: [0, 10, 0, 6], //間距表示 上右下左
},
//設置numNum(數量)屬性的樣式，這里與 return中的numNum保持一致
numNum: {
color: '#8c8c8c',
},
},
},
這樣就好看一些了
最終的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 500px;background-color: pink;"></div>
<script>
var myChart = echarts.init(document.querySelector('div'))
let lejibaoxiuTotals=140;
let listSummary=[
{name:'華為1',value:10},
{name:'華為2',value:10},
{name:'華為3',value:10},
{name:'華為4',value:10},
{name:'華為5',value:10},
{name:'華為6',value:10},
{name:'華為7',value:10},
{name:'華為8',value:10},
{name:'華為9',value:10},
{name:'華為10',value:10},
{name:'華為12',value:10},
{name:'華1為13',value:10},
{name:'012華3為',value:10},
{name:'華1為2',value:10},
]
var option = {
tooltip: {
trigger: 'item',
},
legend: {
type: 'scroll',
orient: 'vertical',
top: 'center',
bottom: 40,
right: 40,
icon: 'circle',
itemGap: 18,
itemWidth: 8,
itemHeight: 8,
pageButtonItemGap: 5,
textStyle: {
fontSize: 13,
color: '#D9D9D9',
rich: {
name: {
color: '#595959',
width: 77,
padding: [0, 0, 0, 0],
},
val: {
width: 50,
color: '#8c8c8c',
padding: [0, 10, 0, 6],
},
numNum: {
color: '#8c8c8c',
},
},
},
// 控制legend的間距
padding: [10, 0, 20, 20],
// 這里設置箭頭的路徑
pageIcons: {
vertical: [
'path://M472.064 272.448l-399.232 399.232c-22.08 22.08-22.08 57.792 0 79.872 22.016 22.016 57.792 22.08 79.872 0L512 392.256l359.296 359.296c22.016 22.016 57.792 22.08 79.872 0 22.08-22.08 22.016-57.792 0-79.872L551.936 272.448C529.856 250.432 494.144 250.432 472.064 272.448z',
'path://M472.064 751.552 72.832 352.32c-22.08-22.08-22.08-57.792 0-79.872 22.016-22.016 57.792-22.08 79.872 0L512 631.744l359.296-359.296c22.016-22.016 57.792-22.08 79.872 0 22.08 22.08 22.016 57.792 0 79.872l-399.232 399.232C529.856 773.568 494.144 773.568 472.064 751.552z',
],
},
pageButtonPosition: 'end', // 翻頁的位置。'start'：控制塊在左或上,end控制塊在右或下。
pageIconColor: '#29bca8', // 可以點擊的翻頁按鈕顏色
pageIconInactiveColor: '#7f7f7f', // 禁用的按鈕顏色
pageIconSize: 14, //這當然就是按鈕的大小
formatter: function(name) {
let showNum
let percentage
for (var i = 0; i < listSummary.length; i++) {
if (listSummary[i].name == name) {
showNum = listSummary[i].value
if (lejibaoxiuTotals) {
// 計算百分比
percentage =((listSummary[i].value /lejibaoxiuTotals) *100).toFixed(2) + '%'
} else {
percentage = ''
}
}
}
return `{name| ${name.length > 5 ? name.slice(0, 5) + '...' : name}} | {val| ${percentage}} {numNum| ${showNum}}`
},
},
series: [{
type: 'pie',
// 餅粗的大小
radius: ['44%', '60%'],
// 圖形展示的位置
center: ['30%', 'center'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 0,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
// emphasis 不展示中間的文字
labelLine: {
show: false,
},
data: listSummary, //[{name:'xx',value:'x'}]
}, ],
title: {
text: lejibaoxiuTotals ? lejibaoxiuTotals : '', //展示的總數據
left: '27%',
top: '47%',
textStyle: {
color: '#031f2d',
fontSize: 20,
align: 'center',
},
},
}
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option)
</script>
</body>
</html>
尾聲
如果你覺得我寫的還不錯的話
關注我或者給我點贊打賞
這是我寫下去的動力