在 ECharts 新發布的 3.7 版本 中,廣泛地增加了標籤的表現力。可以支持定製文本塊的樣式,也支持對文本片段應用特定的樣式,如設置顏色、大小、背景、圖片、對齊方式等,從而可以做出豐富的效果。另外增加了可滾動的圖例,從而對圖例過多顯示不下的問題,提供了一種解決方案。
原先 echarts 中的文本標籤,只能對整塊統一進行樣式設置,並且僅僅支持顏色和字體的設置,從而導致不易於製作表達能力更強的文字描述信息。
echarts v3.7 以後,支持了富文本標籤,能夠:
能夠定製文本塊整體的樣式(如背景、邊框、陰影等)、位置、旋轉等。
能夠對文本塊中個別片段定義樣式(如顏色、字體、高寬、背景、陰影等)、對齊方式等。
能夠在文本中使用圖片做小圖標或者背景。
特定組合以上的規則,可以做出簡單表格、分割線等效果。
例子:
Map Labels, Pie Labels, Gauge.
為了支持這些樣式設置,echarts 提供了豐富的文本配置屬性,包括:
字體基本樣式設置: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。
詳情參見教程:富文本標籤
可滾動圖例有不少人會遇到這種問題:圖例項數過多,導致覆蓋住下面的圖,或者甚至超出可視區域,難看而不可接受。之前遇到這種問題時,會建議大家自己使用 HTML 來實現外置的圖例,調用 echarts 提供的圖例相關 API 完成和 echarts 交互。但是,自己實現,畢竟有開發量,所以,終於在這個版本中,給出了一種能翻頁圖例控制項,為這類問題提供了一種可選擇的解決方案。
具體設置,可參見:legend.type。
標籤文本配置的扁平化在 echarts 中有眾多的 textStyle 設置,例如 series-bar.label.normal.textStyle、xAxis.axisLabel.textStyle 等等。這些 textStyle 有些層級過深和語法冗餘,導致不方便,所以進行了扁平化,去掉了他們的 textStyle 這個層級。
也就是說,從前是這種寫法:label.normal.textStyle.fontSize、axisLabel.textStyle.fontSize。
v3.7 之後,推薦這種寫法 label.normal.fontSize、axisLabel.fontSize。
當然,之前的寫法仍然被兼容。
有這些地方進被扁平化了:
axisPointer.textStyle.xxx => axisPointer.xxx
xAxis.axisLabel.textStyle.xxx => xAxis.axisLabel.xxx
yAxis.axisLabel.textStyle.xxx => yAxis.axisLabel.xxx
radar.axisLabel.textStyle.xxx => radar.axisLabel.xxx
singleAxis.axisLabel.textStyle.xxx => singleAxis.axisLabel.xxx
radiusAxis.axisLabel.textStyle.xxx => radiusAxis.axisLabel.xxx
angleAxis.axisLabel.textStyle.xxx => angleAxis.axisLabel.xxx
parallel.parallelAxisDefault.axisLabel.textStyle.xxx => parallel.parallelAxisDefault.xxx
parallelAxis.axisLabel.textStyle.xxx => parallelAxis.axisLabel.xxx
series.label[normal|emphasis].textStyle.xxx => series.label[normal|emphasis].xxx
series.data.label[normal|emphasis].textStyle.xxx => series.data.label[normal|emphasis].xxx
series-gauge.axisLabel.textStyle.xxx => series-gauge.axisLabel.xxx
series-gauge.title.textStyle.xxx => series-gauge.title.xxx
series-gauge.detail.textStyle.xxx => series-gauge.detail.xxx
series-treemap.upperLabel[normal|emphasis].textStyle.xxx => series-treemap.upperLabel[normal|emphasis].xxx
calendar.dayLabel.textStyle.xxx => calendar.dayLabel.xxx
series-graph.edgeLabel[normal|emphasis].textStyle.xxx => series-graph.edgeLabel[normal|emphasis].xxx
calendar.dayLabel.textStyle.xxx => calendar.dayLabel.xxx
calendar.monthLabel.textStyle.xxx => calendar.monthLabel.xxx
calendar.yearLabel.textStyle.xxx => calendar.yearLabel.xxx
markPoint.label[normal|emphasis].textStyle.xxx => markPoint.label[normal|emphasis].xxx
markPoint.data.label[normal|emphasis].textStyle.xxx => markPoint.data.label[normal|emphasis].xxx
markLine.label[normal|emphasis].textStyle.xxx => markLine.label[normal|emphasis].xxx
markLine.data.label[normal|emphasis].textStyle.xxx => markLine.data.label[normal|emphasis].xxx
markArea.label[normal|emphasis].textStyle.xxx => markArea.label[normal|emphasis].xxx
markArea.data.label[normal|emphasis].textStyle.xxx => markArea.data.label[normal|emphasis].xxx
tooltip.axisPointer.crossStyle.textStyle.xxx => tooltip.axisPointer.crossStyle.xxx
axisPointer.label.textStyle.xxx => axisPointer.label.xxx
timeline.label.textStyle.xxx => timeline.label.xxx
radar.name.textStyle.xxx => radar.name.xxx
此外,還有一些其他的細節增強和 BUG FIX,例如:
更多的升級信息,參見 changelog。
下載地址