ECharts 中的樣式簡介
本文主要是大略概述,用哪些方法,可以設置設置樣式,改變圖形元素或者文字的顏色、明暗、大小等。
之所以用“樣式”這種可能不很符合數據可視化思維的詞,是因爲,比較通俗易懂。
本文介紹這幾種方式,他們的功能範疇可能會有交叉(即同一種細節的效果可能可以用不同的方式實現),但是他們各有各的場景偏好。
- 顏色主題(Theme)
- 調色盤
- 直接樣式設置(itemStyle、lineStyle、areaStyle、label、...)
- 視覺映射(visualMap)
其他關於樣式的文章,參見:個性化圖表的樣式,數據的視覺映射。
顏色主題(Theme)
最簡單的更改全局樣式的方式,是直接採用顏色主題(theme)。例如,在 示例集合 中,可以選擇 “Theme”,直接看到採用主題的效果。
ECharts4 開始,除了一貫的默認主題外,新內置了兩套主題,分別爲 'light'
和 'dark'
。可以這麼來使用它們:
var chart = echarts.init(dom, 'light');
或者
var chart = echarts.init(dom, 'dark');
其他的主題,沒有內置在 ECharts 中,需要自己加載。這些主題可以在 主題編輯器 裏訪問到。也可以使用這個主題編輯器,自己編輯主題。下載下來的主題可以這樣使用:
如果主題保存爲 JSON 文件,那麼可以自行加載和註冊,例如:
// 假設主題名稱是 "vintage"
$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {
echarts.registerTheme('vintage', JSON.parse(themeJSON))
var chart = echarts.init(dom, 'vintage');
});
如果保存爲 UMD 格式的 JS 文件,那麼支持了自注冊,直接引入 JS 文件即可:
// HTML 引入 vintage.js 文件後(假設主題名稱是 "vintage")
var chart = echarts.init(dom, 'vintage');
// ...
調色盤
調色盤,可以在 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 中,很多地方可以設置 itemStyle、lineStyle、areaStyle、label 等等。這些的地方可以直接設置圖形元素的顏色、線寬、點的大小、標籤的文字、標籤的樣式等等。
一般來說,ECharts 的各個系列和組件,都遵從這些命名習慣,雖然不同圖表和組件中,itemStyle
、label
等可能出現在不同的地方。
直接樣式設置的另一篇介紹,參見 個性化圖表的樣式。
高亮的樣式: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 組件 能指定數據到顏色、圖形尺寸的映射規則,詳見 數據的視覺映射。