ECharts 富文本標簽

2018-08-26 14:56 更新

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

ECharts 富文本標簽可以應(yīng)用在許多地方,例如:

ECharts 使用富文本標簽

點擊編輯實例 》》

ECharts 使用富文本標簽

點擊編輯實例 》》

ECharts 使用富文本標簽

點擊編輯實例 》》

其他一些例子: Map LabelsPie LabelsGauge.

富文本標簽的作用

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

富文本標簽的主要功能:

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

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

開始下面的介紹開始之前,先說明一下下面會使用的兩個名詞的含義:

  • 文本塊(Text Block):文本標簽塊整體。
  • 文本片段(Text Fregment):文本標簽塊中的部分文本。

如下圖示例:


點擊編輯實例 》》

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

ECharts 提供了豐富的文本標簽配置項,包括:

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

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

例如:

label: {
    normal: {

        // 在文本中,可以對部分文本采用 rich 中定義樣式。
        // 這里需要在文本中使用標記符號:
        // `{styleName|text content text content}` 標記樣式名。
        // 注意,換行仍是使用 '\n'。
        formatter: [
            '{a|這段文本采用樣式a}',
            '{b|這段文本采用樣式b}這段用默認樣式{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。

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

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

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

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

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

例如:

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

點擊編輯實例 》》

標簽的位置

對于折線圖、柱狀圖、散點圖等,均可以使用 label 來設(shè)置標簽。

標簽的相對于圖形元素的位置,一般使用 label[normal|emphasis].position、label[normal|emphasis].distance 來配置。

例如:

ECharts 設(shè)置圖表標簽位置

點擊編輯實例 》》

注意:position 在不同的圖中可取值有所不同。distance 并不是在每個圖中都支持。詳情請參見 option 文檔。

標簽的旋轉(zhuǎn)

某些圖中,為了能有足夠長的空間來顯示標簽,需要對標簽進行旋轉(zhuǎn)。例如:

ECharts 實現(xiàn)標簽的旋轉(zhuǎn)操作

點擊編輯實例 》》

上述實例通過結(jié)合 align 和 verticalAlign 來對標簽位置進行了調(diào)整。

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

文本片段的排版和對齊

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

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

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

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

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

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

文本塊的寬度直接由文本塊的 width 指定,否則,由最長的行決定。

寬度決定后,在一行中進行文本片段的放置。文本片段的 align 決定了文本片段在行中的水平位置:

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

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

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

例如:

ECharts 設(shè)置文本片段的排版和對齊

點擊編輯實例 》》

ECharts 特殊效果:圖標、分割線、標題塊、簡單表格

實例展示:

ECharts 特殊效果:圖標、分割線、標題塊、簡單表格

點擊編輯實例 》》

文本片段的 backgroundColor 可以指定為圖片后,就可以在文本中使用圖標了,具體操作:

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

分割線實際是用 border 實現(xiàn)的:

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

標題塊是使用 backgroundColor 實現(xiàn)的:

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

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

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

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號