foreword
When using Echarts to draw a picture, sometimes the chart will not be fully displayed in the fixed-size box model (dom container), so we need to make relevant adjustments to the chart to make the content of the chart display completely. Combined with the situation encountered recently, some solutions are proposed
(it is relatively one-sided, and will be supplemented in the future when encountering new situations)
Histogram, Line Chart
1. Grid configuration items
For column charts and line charts, the position of the chart in the container can be adjusted through the grid configuration item. Take the line chart as an example:
-
The tick labels of the horizontal axis in the line chart are not displayed completely:
-
The grid configuration item
grid is a drawing grid in the Cartesian coordinate system. A single grid can place up to two X axes up and down, and two Y axes left and right. Line charts, histograms, and scatter plots (bubble charts) can be drawn on the grid -
left, top, right, and bottom properties
(1) You can adjust the position of the chart in the grid through the left, top, right, and bottom properties. For example, the left property adjusts the distance between the chart component and the left side of the container (2) these
properties The value of can be a specific pixel value like 20, or a percentage relative to the height and width of the container like '20%' -
Example:
(1) Code
Adjust the right property through the grid configuration item, so that the chart is farther from the right side of the grid so that the chart can be displayed completely:
(2) Results
2. Horizontal axis scale label
Sometimes the content of the horizontal axis scale label is too long to display completely. At this time, we can process the horizontal axis scale label, including the font size of the horizontal axis scale label, the interval between labels, the angle of rotation, etc. make adjustments
- Official website documents:
- Example:
process the scale label of the horizontal axis, including label interval, rotation angle, distance between the scale label and the axis
(1) code
(2) result
Nested donut graph
1. Problem
When using a nested ring graph, the label content of the outer ring cannot be fully displayed. By adjusting the grid attribute and the size of the two rings, the problem still exists:
2. Solve
You can make room for the label content by modifying the length of the label's visual guideline
-
Official documentation:
-
The visual guide line is divided into 2 sections:
the first section length (the inner line), the second section length2 (the outer line) -
In the series parameter setting of the outer ring, the corresponding visual guide line length can be set through the labelLine attribute:
-
For example: the length of the second visual guide line length2 (outer layer) is 100:
-
We try to shorten the length of the second segment length2, set it to 15:
It can be seen that part of the previously invisible label content can be displayed:
- Further adjust the length of the two visual guide lines (length, length2), and at the same time, adjust the font size of the label and the radius of the two rings accordingly, so that the content of the label can be fully displayed
pie chart
For pie charts, you can adjust the chart to make it fully displayed by adjusting the radius of the circle, the position of the center of the circle, the font size of the scale label, the length of the visual guide line of the scale label, etc.
