ECharts 富文本標(biāo)簽

ECharts 富文本標(biāo)簽的應(yīng)用

ECharts 富文本標(biāo)簽可以應(yīng)用在許多地方，例如：

點(diǎn)擊編輯實(shí)例 》》

點(diǎn)擊編輯實(shí)例 》》

點(diǎn)擊編輯實(shí)例 》》

其他一些例子： Map Labels, Pie Labels, Gauge.

富文本標(biāo)簽的作用

其實(shí)，富文本標(biāo)簽是在 ECharts v3.7以后才增加的功能；在 ECharts v3.7之前的版本中，只能對(duì)整個(gè)塊進(jìn)行統(tǒng)一樣式的設(shè)置，而且只可以設(shè)置字體和顏色，不易于制作表達(dá)能力更強(qiáng)的文字描述信息。

富文本標(biāo)簽的主要功能：

• 能夠定制文本塊整體的樣式（如背景、邊框、陰影等）、位置、旋轉(zhuǎn)等。
• 能夠?qū)ξ谋緣K中個(gè)別片段定義樣式（如顏色、字體、高寬、背景、陰影等）、對(duì)齊方式等。
• 能夠在文本中使用圖片做小圖標(biāo)或者背景。
• 特定組合以上的規(guī)則，可以做出簡(jiǎn)單表格、分割線(xiàn)等效果。

文本塊和文本片段的含義：

開(kāi)始下面的介紹開(kāi)始之前，先說(shuō)明一下下面會(huì)使用的兩個(gè)名詞的含義：

• 文本塊（Text Block）：文本標(biāo)簽塊整體。
• 文本片段（Text Fregment）：文本標(biāo)簽塊中的部分文本。

如下圖示例：

點(diǎn)擊編輯實(shí)例 》》

ECharts 文本樣式相關(guān)的配置項(xiàng)

ECharts 提供了豐富的文本標(biāo)簽配置項(xiàng)，包括：

• 字體基本樣式設(shè)置：fontStyle、fontWeight、fontSize、fontFamily。
• 文字顏色：color。
• 文字描邊：textBorderColor、textBorderWidth。
• 文字陰影：textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY。
• 文本塊或文本片段大?。簂ineHeight、width、height、padding。
• 文本塊或文本片段的對(duì)齊：align、verticalAlign。
• 文本塊或文本片段的邊框、背景（顏色或圖片）：backgroundColor、borderColor、borderWidth、borderRadius。
• 文本塊或文本片段的陰影：shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY。
• 文本塊的位置和旋轉(zhuǎn)：position、distance、rotate。

可以在各處的 rich 屬性中定義文本片段樣式。例如 series-bar.label.normal.rich

例如：

label: {
    normal: {

        // 在文本中，可以對(duì)部分文本采用 rich 中定義樣式。
        // 這里需要在文本中使用標(biāo)記符號(hào)：
        // `{styleName|text content text content}` 標(biāo)記樣式名。
        // 注意，換行仍是使用 '\n'。
        formatter: [
            '{a|這段文本采用樣式a}',
            '{b|這段文本采用樣式b}這段用默認(rèn)樣式{x|這段用樣式x}'
        ].join('\n'),

        // 這里是文本塊的樣式設(shè)置：
        color: '#333',
        fontSize: 5,
        fontFamily: 'Arial',
        borderWidth: 3,
        backgroundColor: '#984455',
        padding: [3, 10, 10, 5],
        lineHeight: 20,

        // rich 里是文本片段的樣式設(shè)置：
        rich: {
            a: {
                color: 'red',
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: 'xxx/xxx.jpg'
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: 'Microsoft YaHei',
                borderColor: '#449933',
                borderRadius: 4
            },
            ...
        }
    }
}

注意：如果不定義 rich，不能指定文字塊的 width 和 height。

文本、文本框、文本片段的基本樣式和裝飾：

每個(gè)文本可以設(shè)置基本的字體樣式：fontStyle、fontWeight、fontSize、fontFamily。

可以設(shè)置文字的顏色 color 和邊框的顏色：textBorderColor、textBorderWidth。

文本框可以設(shè)置邊框和背景的樣式：borderColor、borderWidth、backgroundColor、padding。

文本片段也可以設(shè)置邊框和背景的樣式：borderColor、borderWidth、backgroundColor、padding。

例如：

點(diǎn)擊編輯實(shí)例 》》

標(biāo)簽的位置

對(duì)于折線(xiàn)圖、柱狀圖、散點(diǎn)圖等，均可以使用 label 來(lái)設(shè)置標(biāo)簽。

標(biāo)簽的相對(duì)于圖形元素的位置，一般使用 label[normal|emphasis].position、label[normal|emphasis].distance 來(lái)配置。

例如：

點(diǎn)擊編輯實(shí)例 》》

注意：position 在不同的圖中可取值有所不同。distance 并不是在每個(gè)圖中都支持。詳情請(qǐng)參見(jiàn) option 文檔。

標(biāo)簽的旋轉(zhuǎn)

某些圖中，為了能有足夠長(zhǎng)的空間來(lái)顯示標(biāo)簽，需要對(duì)標(biāo)簽進(jìn)行旋轉(zhuǎn)。例如：

點(diǎn)擊編輯實(shí)例 》》

上述實(shí)例通過(guò)結(jié)合 align 和 verticalAlign 來(lái)對(duì)標(biāo)簽位置進(jìn)行了調(diào)整。

注意：在結(jié)合 align 和 verticalAlign 的時(shí)候要遵循先使用 align 和 verticalAlign 定位，然后再旋轉(zhuǎn)的處理邏輯。

文本片段的排版和對(duì)齊

我們可以將 ECharts 文本片段的排版方式想象成 CSS 中的 inline-block，在文檔流中按行進(jìn)行放置。

每個(gè)文本片段的內(nèi)容盒尺寸（content box size），默認(rèn)是根據(jù)文字大小決定的。但是，也可以設(shè)置 width、height 來(lái)強(qiáng)制指定，雖然一般不會(huì)這么做（參見(jiàn)下文）。文本片段的邊框盒尺寸（border box size），由上述本身尺寸，加上文本片段的 padding 來(lái)得到。

只有 '\n' 是換行符，能導(dǎo)致?lián)Q行。

一行內(nèi)，會(huì)有多個(gè)文本片段。每行的實(shí)際高度，由 lineHeight 最大的文本片段決定。文本片段的 lineHeight 可直接在 rich 中指定，也可以在 rich 的父層級(jí)中統(tǒng)一指定而采用到 rich 的所有項(xiàng)中，如果都不指定，則取文本片段的邊框盒尺寸（border box size）。

在一行的 lineHeight 被決定后，一行內(nèi)，文本片段的豎直位置，由文本片段的 verticalAlign 來(lái)指定（這里和 CSS 中的規(guī)則稍有不同）：

• 'bottom'：文本片段的盒的底邊貼住行底。
• 'top'：文本片段的盒的頂邊貼住行頂。
• 'middle'：居行中。

文本塊的寬度直接由文本塊的 width 指定，否則，由最長(zhǎng)的行決定。

寬度決定后，在一行中進(jìn)行文本片段的放置。文本片段的 align 決定了文本片段在行中的水平位置：

• 首先，從左向右連續(xù)緊靠放置 align 為 'left' 的文本片段盒。
• 然后，從右向左連續(xù)緊靠放置 align 為 'right' 的文本片段盒。
• 最后，剩余的沒(méi)處理的文本片段盒，緊貼著，在中間剩余的區(qū)域中居中放置。

關(guān)于文字在文本片段盒中的位置：

• 如果 align 為 'center'，則文字在文本片段盒中是居中的。
• 如果 align 為 'left'，則文字在文本片段盒中是居左的。
• 如果 align 為 'right'，則文字在文本片段盒中是居右的。

例如：

點(diǎn)擊編輯實(shí)例 》》

ECharts 特殊效果：圖標(biāo)、分割線(xiàn)、標(biāo)題塊、簡(jiǎn)單表格

實(shí)例展示：

點(diǎn)擊編輯實(shí)例 》》

文本片段的 backgroundColor 可以指定為圖片后，就可以在文本中使用圖標(biāo)了，具體操作：

rich: {
    Sunny: {
        // 這樣設(shè)定 backgroundColor 就可以是圖片了。
        backgroundColor: {
            image: './data/asset/img/weather/sunny_128.png'
        },
        // 可以只指定圖片的高度，從而圖片的寬度根據(jù)圖片的長(zhǎng)寬比自動(dòng)得到。
        height: 30
    }
}

分割線(xiàn)實(shí)際是用 border 實(shí)現(xiàn)的：

rich: {
    hr: {
        borderColor: '#777',
        // 這里把 width 設(shè)置為 '100%'，表示分割線(xiàn)的長(zhǎng)度充滿(mǎn)文本塊。
        // 注意，這里是文本塊內(nèi)容盒（content box）的 100%，而不包含 padding。
        // 雖然這和 CSS 相關(guān)的定義有所不同，但是在這類(lèi)場(chǎng)景中更加方便。
        width: '100%',
        borderWidth: 0.5,
        height: 0
    }
}

標(biāo)題塊是使用 backgroundColor 實(shí)現(xiàn)的：

// 標(biāo)題文字居左
formatter: '{titleBg|Left Title}',
rich: {
    titleBg: {
        backgroundColor: '#000',
        height: 30,
        borderRadius: [5, 5, 0, 0],
        padding: [0, 10, 0, 10],
        width: '100%',
        color: '#eee'
    }
}

// 標(biāo)題文字居中。
// 這個(gè)實(shí)現(xiàn)有些 tricky，但是，能夠不引入更復(fù)雜的排版規(guī)則而實(shí)現(xiàn)這個(gè)效果。
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'
    }
}

簡(jiǎn)單表格的設(shè)定，其實(shí)就是給不同行上縱向?qū)?yīng)的文本片段設(shè)定同樣的寬度就可以了。參見(jiàn)本文最開(kāi)始的 例子。