ECharts v3.7 發布:增加富文本標籤、可滾動圖例

2021-01-07 開源中國

在 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。

下載地址

相關焦點

  • ECharts GL 1.0 alpha 發布
    儘管這兩年時間 ECharts X 沒什麼動靜,但是其它的工作,像 ECharts 3 的架構大改動和後續版本的迭代升級,以及其它 WebGL 產品的開發,都是對新版本架構和技術上的積累。現在我們終於可以說我們準備得差不多了,ECharts-X 的下一代,ECharts-GL 發布 1.0 alpha。
  • ECharts 3.1.1 發布,JavaScript 圖表庫
    Echarts 3.1.1 發布,該版本主要是為了滿足 npm 使用的要求。沒有其他額外的改進。
  • 令人驚嘆的數據可視化-Echarts
    echarts介紹常見的數據可視化庫:ECharts,一個使用 JavaScript 實現的開源可視化庫,可以流暢的運行在 PC 和行動裝置上,兼容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),底層依賴矢量圖形庫 ZRender,提供直觀,交互豐富,可高度個性化定製的數據可視化圖表
  • ECharts 3.3.2 發布,新增自定義圖形功能
    感恩節發布的第 50 個 ECharts 版本 3.3.2,新增超級強大的自定義圖形組件,致以我們對 ECharts 用戶最有誠意的感恩之情
  • vue-element-admin v3.9.1 發布,後臺集成方案
    vue-element-admin v3.9.1 已發布,更新內容:feature[TagsView]: 支持滑鼠中鍵關閉 TagsView #1149feature
  • FineReport V8.0今日正式發布
    7.在線導入excel做成選項    描述:目前我們的在線導入excel後臺邏輯比較複雜,不能滿足所有客戶的需求,增加屬性控制不同情況使用不同匹配邏輯,使得功能更加靈活。    9.支持編輯富文本    描述:設計器單元格元素增加富文本編輯器,實現同一單元格中不同內容樣式不同。    10.tab布局    描述:表單中增加tab布局,實現卡片式組件。
  • 圖片SEO和Alt標籤:7個高級圖片優化技巧,可增加圖片流量
    您經常會聽到SEO在談論優化alt標籤或alt文本。它們有時也稱為alt描述或alt屬性。它們可互換使用來指代同一件事。但是他們是什麼?這是Matt Cutts很久以前以一種易於理解的方式解釋的方式。嘗試編寫與文本有關的替代文本,該替代文本與所處頁面的主題相關,尤其是當圖像本質上更為通用且不像其他圖像那麼具體時。 3.獨一無二不要將頁面的主要目標關鍵字用作頁面上每個圖像的alt標籤。
  • v-region 2.1.3 發布,增加城市選擇專用模式
    v-region v2.1.3 版本發布,更新內容:修復 slot
  • 如何在vue框架項目中使用echarts並製作柱狀圖
    vue init webpack wanm3、切換工作目錄cd wanm/,然後運行項目:npm run dev運行項目:npm run dev4、如果要在vue框架項目中使用echarts,需要安裝echartsnpm install echarts
  • ECharts數據可視化:從0到1的蛻變(內部技術分享總結)
    實例對象基礎配置首先 ECharts 的圖形化呈現主要是通過配置方法來實現的 setOption,然後是對圖形標籤進行初始化,最後把配置方法 setOption 賦值到初始化圖形中,詳細的配置文件請戳這裡 https://echarts.apache.org/zh/option.html#title
  • ECharts 4.8.0 發布,JavaScript 數據可視化圖表庫
    ECharts 4.8.0 已發布,ECharts 是一個使用 JavaScript 實現的開源可視化庫,可以流暢的運行在 PC 和行動裝置上,兼容當前絕大部分瀏覽器,底層依賴輕量級的矢量圖形庫
  • Windows Terminal v0.7 發布:支持分屏、重排選項卡和改進 UI
    近日通過Microsoft Store,微軟發布了0.7版本更新。本次重大版本更新中引入了諸多新功能,包括支持多面板、選項卡重新排列、UI改進等等。Windows Terminal v0.7主要新功能多面板現在用戶可以將Windows Terminal窗口分隔稱多個面板,這允許用戶在當前標籤頁上同時打開多個命令行面板
  • 【行業資訊】ECharts 4.9.0 發布,JavaScript 實現的交互式圖表...
    ECharts是一款基於Javascript的數據可視化圖表庫,提供直觀,生動,可交互,可個性化定製的數據可視化圖表。 ECharts 提供大量常用的數據可視化圖表,底層基於ZRender(一個全新的輕量級canvas類庫),創建了坐標系,圖例,提示,工具箱等基礎組件,並在此上構建出折線圖(區域圖)、柱狀圖(條狀圖)、散點圖(氣泡圖)、餅圖(環形圖)、K線圖、地圖、力導向布局圖以及和弦圖,同時支持任意維度的堆積和多圖表混合展現。
  • 深度學習的端到端文本OCR:使用EAST從自然場景圖片中提取文本
    在這個數位化的時代,存儲、編輯、索引和查找數字文檔中的信息比花幾個小時滾動列印/手寫/列印的文檔要容易得多。此外,在一個相當大的非數字文檔中查找內容不僅耗時;在手動滾動文本時,我們也可能會錯過信息。對我們來說幸運的是,電腦每天都在做一些人類認為只有自己能做的事情,而且通常表現得比我們更好。
  • 第二講 R作圖-基礎-圖形參數設置:標題、圖例、文字
    如果cex值小於 1,則減小文本大小。相反,任何大於1 的cex值都可以增加字體大小。以下參數可用於更改字體大小:cex.main:主標題的文本大小cex.lab:軸標題的文本大小x和y坐標legend:圖例文字fill:用於填充圖例文本旁邊的框的顏色col
  • ECharts 大版本 4.0 正式發布:帶來 8 項全新「黑科技」特性
    伴隨這些產品的發布,百度也發布了全新升級的數據可視化品牌 —— 「百度數據可視化實驗室」,標誌著百度在數據可視化領域將開啟一番大的動作。[+] zrender SVG 渲染引擎發布,從而支持 Canvas / SVG 雙引擎渲染,可進按照場景所需進行切換。例如,SVG 可適用於移動端、單頁多圖表等場景,Canvas 適用於大數據量、視覺特效需求等場景。Canvas 渲染引擎仍為默認引擎。
  • 五種JavaScript富文本編輯器,總有一款適合你
    所幸,可採取的解決方案有很多。因此,總能找到一種工具,來創建符合用戶需求和資金要求的在線文本編輯器。本文將簡要介紹五個JavaScript富文本編輯器,以幫助你找到滿足期望的編輯器。1. Froala編輯器
  • ECharts 4.8.0 發布
    Apache ECharts (incubating) 於 2020.05.25 正式發布 4.8.0 版本。
  • R與生物專題|第二講 R作圖-基礎-圖形參數設置:標題、圖例、文字
    5:符號字體使用下面的R代碼創建具有粗體和斜體字體樣式的標題。如果cex值小於 1,則減小文本大小。相反,任何大於1 的cex值都可以增加字體大小。par( # 更改顏色 col.main="red",col.lab="blue",col.sub="black", # 標題粗斜體 font.main=4,font.lab=4,font.sub=4, # 更改字體大小 cex.main=2,cex.lab=1.7,cex.sub=1.2 ) #作圖barplot
  • Python圖表繪製很簡單,一文帶你學會如何生成帶圖例的餅圖
    matplotlib庫,作為Python數據可視化的常用庫和經典庫,咱們已經探討了多次,並了解了內部多個函數的使用,上次咱們聊了如何在圖表中添加各種樣式的圖例,今天呢,咱們接著上次的內容繼續深入聊聊,看看如何在餅圖中添加圖例。