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
\