Echarts-樣式簡介


本文介紹這幾種方式,他們的功能范疇可能會有交叉(即同一種細節的效果可能可以用不同的方式實現),但是他們各有各的場景偏好。

  • 顏色主題(Theme)
  • 調色盤
  • 直接樣式設置(itemStyle、lineStyle、areaStyle、label、...)
  • 視覺映射(visualMap)

顏色主題(Theme),這個已經在上一篇發布了,具體引入有相關的兩篇文章自己查閱

調色盤

調色盤,可以在 option 中設置。它給定了一組顏色,圖形、系列會自動從其中選擇顏色。 可以設置全局的調色盤,也可以設置系列自己專屬的調色盤。

option = { // 全局調色盤。 color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'], series: [{ type: 'bar', // 此系列自己的調色盤。 color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'], ... }, { type: 'pie', // 此系列自己的調色盤。 color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'], ... }] }

直接的樣式設置 itemStyle, lineStyle, areaStyle, label, ...

直接的樣式設置是比較常用設置方式。縱觀 ECharts 的 option 中,很多地方可以設置 itemStylelineStyleareaStylelabel 等等。這些的地方可以直接設置圖形元素的顏色、線寬、點的大小、標簽的文字、標簽的樣式等等。

一般來說,ECharts 的各個系列和組件,都遵從這些命名習慣,雖然不同圖表和組件中,itemStylelabel 等可能出現在不同的地方。

直接樣式設置的另一篇介紹,參見 個性化圖表的樣式

高亮的樣式:emphasis

在鼠標懸浮到圖形元素上時,一般會出現高亮的樣式。默認情況下,高亮的樣式是根據普通樣式自動生成的。但是高亮的樣式也可以自己定義,主要是通過 emphasis 屬性來定制。emphsis 中的結構,和普通樣式的結構相同,例如:

option = { series: { type: 'scatter', // 普通樣式。 itemStyle: { // 點的顏色。 color: 'red' }, label: { show: true, // 標簽的文字。 formatter: 'This is a normal label.' }, // 高亮樣式。 emphasis: { itemStyle: { // 高亮時點的顏色。 color: 'blue' }, label: { show: true, // 高亮時標簽的文字。 formatter: 'This is a emphasis label.' } } } }

注意:在 ECharts4 以前,高亮和普通樣式的寫法,是這樣的:

option = { series: { type: 'scatter', itemStyle: { // 普通樣式。 normal: { // 點的顏色。 color: 'red' }, // 高亮樣式。 emphasis: { // 高亮時點的顏色。 color: 'blue' } }, label: { // 普通樣式。 normal: { show: true, // 標簽的文字。 formatter: 'This is a normal label.' }, // 高亮樣式。 emphasis: { show: true, // 高亮時標簽的文字。 formatter: 'This is a emphasis label.' } } } }

這種寫法 仍然被兼容,但是,不再推薦。事實上,多數情況下,使用者只會配置普通狀態下的樣式,而使用默認的高亮樣式。所以在 ECharts4 中,支持不寫 normal 的配置方法(即本文開頭的那種寫法),使得配置項更扁平簡單。

通過 visualMap 組件設定樣式

visualMap 組件 能指定數據到顏色、圖形尺寸的映射規則,詳見 數據的視覺映射

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM