凡例のテキストが長すぎて多すぎます
円グラフを使用すると、ラベルのテキストが長すぎたり、凡例の数が多すぎたりするなど、データが多すぎるため、ページのレイアウトが重なったり、見苦しくなったりすることがあります。今日はこの問題についてお話します これらの問題は、これらの設定で改善できます
テキストが長すぎます。折り返してください
legend: {
icon: 'circle',
top: '',
right: '0px',
// width: 120,
// height:'100%',
type: 'scroll', //legend要多，进行分页处理
orient: 'vertical',
textStyle: {
color: 'rgba(223, 231, 252, 0.996078431372549)',
fontSize: 14,
},
data: listData[0].name,
pageIconColor: '#ccc',//分页按钮颜色
pageTextStyle:{
color:'rgba(223, 231, 252, 0.996078431372549)' //分页数字
},
formatter: (name) => {
if (!name) return ''
return this.LineFeedLabel(name, 8) // 根据你的需求修改参数
}
// formatter: function (name) {
// return name;
// }
},
以下は長すぎるテキストを処理するための行数です。ここでは 8 単語を超える文字を折り返すように設定されています。
LineFeedLabel (data, length) {
//data 要处理的字符串
//length 每行显示长度
let word = ''
let num = Math.ceil(data.length / length) // 向上取整数
// 一行展示length个
if (num > 1) {
for (let i = 1; i <= num; i++) {
word += data.substr((i - 1) * length, length)
if (i < num) {
word += '\n'
}
}
} else {
word += data.substr(0, length)
}
return word
},
凡例が多すぎる場合、ページング処理の方法はtype:scroll,orient: 'vertical'凡例に属性を追加してページングの効果を実現することです。
type: 'scroll', //legend要多，进行分页处理
orient: 'vertical',
ページング効果とページネーション矢印の下のテキストのスタイルと色を変更する必要がある場合はpageIconColor、属性を使用して変更できます。
pageIconColor:'#ccc'
ページめくりボタンが非アクティブなとき (つまり、ページが最後までめくられたとき) の色の変更
pageIconInactiveColor : '#aaa'
ページングボタンのサイズ。たとえば、数値または配列にすることができます。つまり[12,5]、[宽，高]
pageIconSize : 12
凡例では、ボタンとページ情報の間のスペース
pageButtonItemGap : 5
ページング情報の表示形式（総ページ数をまとめて表示する場合）
pageFormatter : '{current}/{total}'
//current与total，都必须是number数值型数字
ページングアイコンの矢印の設定を変更でき、オリジナルの矢印モードを使用できます
pageIcons:{
horizontal
}
ページネーション情報のテキスト スタイルの変更は通常の CSS スタイル属性です。名前をキャメル ケースで付けることを忘れないでください。
pageTextStyle:{
color:'rgba(223, 231, 252, 0.996078431372549)', //分页数字
fontWeight:'400'
}