{{target: rich-text}}
Rich text can be used in Apache EChartsTM labels of series, axis or other components. For example:
More examples: Map Labels, Pie Labels, Gauge.
Before v3.7, the style options was only able to applied to the whole label text block, and only color and font can be configured, which restricted the expressability of text descriptions.
Since v3.7, rich text has been supported:
At the beginning, the meanings of two terms that will be used below should be clarified:
For example: ~340x240
echarts provides plenty of text options, including:
fontStyle
, fontWeight
, fontSize
, fontFamily
.color
.textBorderColor
, textBorderWidth
.textShadowColor
, textShadowBlur
, textShadowOffsetX
, textShadowOffsetY
.lineHeight
, width
, height
, padding
.align
, verticalAlign
.backgroundColor
, borderColor
, borderWidth
, borderRadius
.shadowColor
, shadowBlur
, shadowOffsetX
, shadowOffsetY
.position
, distance
, rotate
.User can defined styles for text fragment in rich
property. For example, series-bar.label.rich
For example:
label: { // Styles defined in 'rich' can be applied to some fragments // of text by adding some markers to those fragment, like // `{styleName|text content text content}`. // `'\n'` is the newline character. formatter: [ '{a|Style "a" is applied to this fragment}' '{b|Style "b" is applied to this fragment}This fragment use default style{x|use style "x"}' ].join('\n'), // Styles for the whole text block are defined here: color: '#333', fontSize: 5, fontFamily: 'Arial', borderWidth: 3, backgroundColor: '#984455', padding: [3, 10, 10, 5], lineHeight: 20, // Styles for text fragments are defined here: rich: { a: { color: 'red', lineHeight: 10 }, b: { backgroundColor: { image: 'xxx/xxx.jpg' }, height: 40 }, x: { fontSize: 18, fontFamily: 'Microsoft YaHei', borderColor: '#449933', borderRadius: 4 }, ... } }
Notice:
width
和height
only work whenrich
specified.
Basic font style can be set to text: fontStyle
, fontWeight
, fontSize
, fontFamily
.
Fill color and stroke color can be set to text: color
, textBorderColor
, textBorderWidth
.
Border style and background style can be set to text block: borderColor
, borderWidth
, backgroundColor
, padding
.
Border style and background style can be set to text fragment too: borderColor
, borderWidth
, backgroundColor
, padding
.
For example: ~700x300
label
option can be use in charts like bar
, line
, scatter
, etc. The position of a label, can be specified by label.position、label.distance.
For example: ~800x400
Notice, there are different optional values of
position
by different chart types. Anddistance
is not supported in every chart. More detailed info can be checked in option doc.
Sometimes label is needed to be rotated. For example:
align andverticalAlign can be used to adjust location of label in this scenario.
Notice, align
and verticalAlign
are applied firstly, then rotate.
To understand the layout rule, every text fragment can be imagined as a inline-block
dom element in CSS.
content box size
of a text fragment is determined by its font size by default. It can also be specified directly by width
and height
, although they are rarely set. border box size
of a text fragment is calculated by adding the border box size
and padding
.
Only '\n'
is the newline character, which breaks a line.
Multiple text fragment exist in a single line. The height of a line is determined by the biggest lineHeight
of text fragments. lineHeight
of a text fragment can be specified in rich
, or in the parent level of rich
, otherwise using box size
of the text fragment.
Having lineHeight
determined, the vertical position of text fragments can be determined by verticalAlign
(there is a little different from the rule in CSS):
'bottom'
: The bottom edge of the text fragment sticks to the bottom edge of the line.'top'
: The top edge of the text fragment sticks to the top edge of the line.'middle'
: In the middle of the line.The width of a text block can be specified by width
, otherwise, by the longest line. Having the width determined, text fragment can be placed in each line, where the horizontal position of text fragments can be determined by its align
.
align
is 'left'
from left to right continuously.align
is 'right'
from right to left continuously.The position of text in a text fragment:
align
is 'center'
, text aligns at the center of the text fragment box.align
is 'left'
, text aligns at the left of the text fragment box.align
is 'right'
, text aligns at the right of the text fragment box.For example:
See example:
Icon is implemented by using image in backgroundColor
.
rich: { Sunny: { backgroundColor: { image: './data/asset/img/weather/sunny_128.png' }, // Can only height specified, but leave width auto obtained // from the image, where the aspect ratio kept. height: 30 } }
Horizontal rule (like HTML <hr> tag) can be implemented by border:
rich: { hr: { borderColor: '#777', // width is set as '100%' to fullfill the text block. // Notice, the percentage is based on the content box, without // padding. Although it is a little different from CSS rule, // it is convinent in most cases. width: '100%', borderWidth: 0.5, height: 0 } }
Title block can be implemented by backgroundColor
:
// Title is at left. formatter: '{titleBg|Left Title}', rich: { titleBg: { backgroundColor: '#000', height: 30, borderRadius: [5, 5, 0, 0], padding: [0, 10, 0, 10], width: '100%', color: '#eee' } } // Title is in the center of the line. // This implementation is a little tricky, but is works // without more complicated layout mechanism involved. formatter: '{tc|Center Title}{titleBg|}', rich: { titleBg: { align: 'right', backgroundColor: '#000', height: 30, borderRadius: [5, 5, 0, 0], padding: [0, 10, 0, 10], width: '100%', color: '#eee' } }
Simple table can be implemented by specify the same width to text fragments that are in the same column of different lines. See the example at the mentioned above.