Echarts Official Tutorial (13) "Rich Text label"

Rich Text label

Rich-text labels can be used in many places, such as graphs, axes labels, and so on. For example: <iframe src= "Http://echarts.baidu.com/gallery/view.html?c=pie-rich-text&amp;edit=1&amp;reset=1" Width= "height=" "></iframe> <iframe src=" http://echarts.baidu.com/gallery/view.html?c= Treemap-obama&amp;edit=1&amp;reset=1 "width=" height= "src=" ></iframe> <iframe http://" Echarts.baidu.com/gallery/view.html?c=bar-rich-text&amp;edit=1&amp;reset=1 "width=" height= ">" </iframe>

Some other examples: Map Labels, Pie Labels, gauge.

The text label in the original echarts can only be styled for the entire block, and only supports color and font settings, resulting in less expressive text description information.

After Echarts v3.7, a rich text label is supported to:

The ability to customize the overall style of the text block (such as background, borders, shadows, etc.), position, rotation, and so on. The
ability to define styles (such as color, font, width, background, shading, etc.), alignment, etc. for individual fragments in a block of text.
the ability to use a small picture icon or background in the text.
specific combination of the above rules, you can make simple tables, split lines and other effects.

Before starting the following introduction, explain the meaning of the two nouns that are used below:

Text Block: Text label block Whole.
a text fragment (text fregment): A portion of text in a text label block.

The following diagram example:

Text-style-related configuration items

Echarts provides a rich set of text label configuration items, including:

Font basic style settings: FontStyle, FontWeight, FontSize, fontFamily.
text colors: color.
text strokes: Textbordercolor, Textborderwidth.
text Shadows: Textshadowcolor, Textshadowblur, Textshadowoffsetx, Textshadowoffsety.
text block or text fragment size: lineheight, width, height, padding.
alignment of text blocks or text fragments: Align, verticalalign.
border, background (color, or picture) of a text block or text fragment: BackgroundColor, BorderColor, BorderWidth, Borderradius.
shadow of a text block or text fragment: Shadowcolor, Shadowblur, Shadowoffsetx, Shadowoffsety.
the position and rotation of the text block: position, distance, rotate.

You can define the text fragment style in the rich attribute everywhere. such as Series-bar.label.normal.rich

For example:

basic styles and decorations for text, text boxes, text fragments

You can set basic font styles for each text: FontStyle, FontWeight, FontSize, fontFamily.

You can set the color of the text color and border Textbordercolor, Textborderwidth.

Text boxes can set the style of borders and backgrounds: bordercolor, borderwidth, BackgroundColor, padding.

Text fragments can also set the style of borders and backgrounds: bordercolor, borderwidth, BackgroundColor, padding.

For example: <iframe src= "Http://echarts.baidu.com/gallery/view.html?c=doc-example/text-options&amp;edit=1&amp Reset=1 "width=" height= "></iframe>"

the position of the label

For line, column, scatter, and so on, you can use label to set the label. The position of the label relative to the graphic element is generally configured using Label[normal|emphasis].position and Label[normal|emphasis].distance.

For example: <iframe src= "http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position&amp;edit=1& Amp;reset=1 "width=" height= "></iframe>"

Note: The position values differ in different graphs. Distance is not supported in every diagram. For more information, see option documentation.

the rotation of the label

In some diagrams, the label needs to be rotated in order to have enough space to display the label. For example: <iframe src= "Http://echarts.baidu.com/gallery/view.html?c=bar-label-rotation&amp;edit=1&amp;reset =1 "width=" 900 "height=" ></iframe>

In this scenario, you can combine align and verticalalign to adjust the label position.

Note that the logic is, first use align and verticalalign positioning, and then rotate.

Typesetting and alignment of text fragments

With regard to typography, each text fragment can be imagined as a inline-block in the CSS, placed in the document stream by line.

The content box size for each text fragment is determined by default based on the size of the text. However, you can also set the width, height to force the designation, although this is not normally done (see below). The bounding box size of the text fragment (border box size) is obtained by the size of the above, plus the padding of the text fragment.

Only ' \ n ' is a newline character that can cause a newline.
Within a line, there will be multiple pieces of text. The actual height of each row is determined by Lineheight's largest text fragment. The lineheight of a text fragment can be specified directly in rich, or it can be uniformly specified in Rich's parent hierarchy and used in all the items of rich, and if not specified, the bounding box size of the text fragment (border box size).

After a row of lineheight is determined, within a line, the vertical position of the text fragment is specified by the verticalalign of the text fragment (here is slightly different from the rules in CSS):

' Bottom ': The bottom of the box on the text fragment is stuck to the bottom of the line.
' top ': A text fragment of the box is affixed to the upper edge of the line.
' Middle ': in the line of residence.

The width of the text block can be specified directly by the width of the text block, otherwise it is determined by the longest line. After the width is determined, the placement of the text fragment in a row. The align of the text fragment determines the horizontal position of the text fragment in the row:

First, the text fragment box with the align as ' left ' is continuously contiguous to left-to-right.
then, from right to left, it immediately places the text fragment box align as ' right '.
Finally, the remaining unhandled text fragment box is pressed tightly and centered in the remaining area of the middle.

About the position of the text in the Text fragment box:

If align is ' center ', the text is centered in the text fragment box.
if the align is ' left ', then the text remains in the text fragment box.
if align is ' right ', the text is left in the text fragment box.

For example: <iframe src= "http://echarts.baidu.com/gallery/view.html?c=doc-example/text-fregment-align&amp;edit=1 "Width=" height= "&amp;reset=1" ></iframe>

Special effects: Icons, split lines, title blocks, simple tables

Look at the following example: <iframe src= "http://echarts.baidu.com/gallery/view.html?c=doc-example/title-block&amp;edit=1& Amp;reset=1 "width=" height= "></iframe>"

BackgroundColor of a text fragment can be specified as a picture, you can use the icon in the text:

Rich: {
    Sunny: {
        //So set BackgroundColor can be a picture.
        backgroundcolor: {
            Image: './data/asset/img/weather/sunny_128.png '
        },
        //You can specify only the height of the picture, Thereby the width of the picture is automatically obtained according to the aspect ratio of the picture.
        height:30
    }
}

The split line is actually implemented with border:

Rich: {
    hr: {
        bordercolor: ' #777 ',
        //Here Set the width to ' 100% ', which means that the length of the split line is full of text blocks.
        //Note that this is 100% of the text block content box, and does not contain padding.
        //Although this is different from CSS-related definitions, it is more convenient in such scenarios.
        width: ' 100% ',
        borderwidth:0.5,
        height:0
    }
}

The title block is implemented using BackgroundColor:

The title text occupies left
formatter: ' {titlebg| Left Title} ',
rich: {
    titlebg: {
        backgroundcolor: ' #000 ',
        height:30,
        Borderradius: [5, 5, 0, 0],< C6/>padding: [0, 0, ten],
        width: ' 100% ',
        color: ' #eee '
    }
}

//title text centered.
//This implementation is somewhat tricky, but it can be achieved without introducing more complex typesetting rules.
Formatter: ' {tc| Center title}{titlebg|} ',
rich: {
    titlebg: {
        align: ' right ',
        backgroundcolor: ' #000 ',
        Height:30,
        Borderradius: [5, 5, 0, 0],
        padding: [0, 0, ten],
        width: ' 100% ',
        color: ' #eee '
    }< c24/>}

The simple table setting, in fact, is to the different lines of vertical corresponding text fragment set the same width on it. See the first example of this article.