This is the 19th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

When we use chart pie charts, we will find that the layout of the page is overlaps or unattractive due to too much data, such as the text of label is too long, the number of legend is too large and other problems. Therefore, today we will talk about the problems that can be improved by setting these Settings

Text too long, line feed

legend: { icon: 'circle', top: '', right: '0px', // width: 120, // height:'100%', type: 'scroll', //legend ', Orient: 'vertical', textStyle: {color: 'r996078431372549 ', fontSize: 14, }, data: listData[0].name, pageIconColor: '# CCC ',// pageTextStyle:{color:'rgba(223, 231, 252, 0.996078431372549)' // page number}, formatter: (name) => {if (! Return this.LineFeedLabel(name, 8)} // formatter: function (name) {return name; / /}},Copy the code

The following is the number of lines that are too long to handle text

LineFeedLabel (data, Length) {//data string to process //length Length of each line to display let word = "let num = math.ceil (data.length /length) // Integer up // Line to display 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 },Copy the code

The number of legend is too large to paginate. Add a type: Scroll, Orient: ‘vertical’ attribute to the legend to achieve pagination effect

Type: 'scroll', // Orient: 'vertical',Copy the code

If you need to change the pagination effect under the text and pagination arrow style color can be modified through the pageIconColor property

pageIconColor:'#ccc'
Copy the code

Color changes when the page turn button is not active (i.e., when the page ends)

pageIconInactiveColor : '#aaa'
Copy the code

Size of the page turn button. It can be a number, it can be an array, for example [12,5], it’s [width, height]

 pageIconSize : 12
Copy the code

In legend, the interval between a button and page information

pageButtonItemGap  : 5
Copy the code

Display format of page information that you want to display together with the total number of pages

PageFormatter: '{current}/{total}' //current and total must be numberCopy the code

Page icon arrow Settings can be modified, you can use the original arrow mode

pageIcons:{
    horizontal
}
Copy the code

Text style changes for page information are normal CSS style properties, just remember to use the camel name

PageTextStyle :{color:' r996078431372549 ', // paging number fontWeight:'400'}Copy the code

\