W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
ECharts 富文本標簽可以應(yīng)用在許多地方,例如:
其他一些例子: Map Labels, Pie Labels, Gauge.
其實,富文本標簽是在 ECharts v3.7以后才增加的功能;在 ECharts v3.7之前的版本中,只能對整個塊進行統(tǒng)一樣式的設(shè)置,而且只可以設(shè)置字體和顏色,不易于制作表達能力更強的文字描述信息。
富文本標簽的主要功能:
開始下面的介紹開始之前,先說明一下下面會使用的兩個名詞的含義:
如下圖示例:
ECharts 提供了豐富的文本標簽配置項,包括:
可以在各處的 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。
例如:
對于折線圖、柱狀圖、散點圖等,均可以使用 label 來設(shè)置標簽。
標簽的相對于圖形元素的位置,一般使用 label[normal|emphasis].position、label[normal|emphasis].distance 來配置。
例如:
注意:position 在不同的圖中可取值有所不同。distance 并不是在每個圖中都支持。詳情請參見 option 文檔。
某些圖中,為了能有足夠長的空間來顯示標簽,需要對標簽進行旋轉(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ī)則稍有不同):
文本塊的寬度直接由文本塊的 width 指定,否則,由最長的行決定。
寬度決定后,在一行中進行文本片段的放置。文本片段的 align 決定了文本片段在行中的水平位置:
關(guān)于文字在文本片段盒中的位置:
例如:
實例展示:
文本片段的 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è)定同樣的寬度就可以了。參見本文最開始的 例子。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: