樣式設(shè)置的幾種方式，他們的功能范疇可能會(huì)有交叉（即同一種細(xì)節(jié)的效果可能可以用不同的方式實(shí)現(xiàn)），但是他們各有各的場(chǎng)景偏好。
- 顏色主題（Theme）
- 調(diào)色盤
- 直接樣式設(shè)置（itemStyle、lineStyle、areaStyle、label、...）
- 視覺映射（visualMap）
其他關(guān)于樣式的文章，參見：個(gè)性化圖表的樣式，數(shù)據(jù)的視覺映射。
顏色主題（Theme）
最簡(jiǎn)單的更改全局樣式的方式，是直接采用顏色主題（theme）。例如，在 示例集合 中，可以選擇 “Theme”，直接看到采用主題的效果。
ECharts4 開始，除了一貫的默認(rèn)主題外，新內(nèi)置了兩套主題，分別為 'light' 和 'dark'。可以這么來(lái)使用它們：
var chart = echarts.init(dom, 'light');
或者
var chart = echarts.init(dom, 'dark');
其他的主題，沒有內(nèi)置在 ECharts 中，需要自己加載。這些主題可以在 主題編輯器 里訪問到。也可以使用這個(gè)主題編輯器，自己編輯主題。下載下來(lái)的主題可以這樣使用：
如果主題保存為 JSON 文件，那么可以自行加載和注冊(cè)，例如：
// 假設(shè)主題名稱是 "vintage"
$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {
echarts.registerTheme('vintage', JSON.parse(themeJSON))
var chart = echarts.init(dom, 'vintage');
});
如果保存為 UMD 格式的 JS 文件，那么支持了自注冊(cè)，直接引入 JS 文件即可：
// HTML 引入 vintage.js 文件后（假設(shè)主題名稱是 "vintage"）
var chart = echarts.init(dom, 'vintage');
// ...
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/echarts.min.js"></script>
<script src="js/macarons.js"></script>
</head>
<body>
<!-- 為 ECharts 準(zhǔn)備一個(gè)具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'), 'macarons');
myChart.setOption({
series : [
{
name: '訪問來(lái)源',
type: 'pie', // 設(shè)置圖表類型為餅圖
radius: '55%', // 餅圖的半徑，外半徑為可視區(qū)尺寸（容器高寬中較小一項(xiàng)）的 55% 長(zhǎng)度。
data:[ // 數(shù)據(jù)數(shù)組，name 為數(shù)據(jù)項(xiàng)名稱，value 為數(shù)據(jù)項(xiàng)值
{value:235, name:'視頻廣告'},
{value:274, name:'聯(lián)盟廣告'},
{value:310, name:'郵件營(yíng)銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
]
}
]
})
</script>
</body>
</html>
調(diào)色盤
調(diào)色盤，可以在 option 中設(shè)置。它給定了一組顏色，圖形、系列會(huì)自動(dòng)從其中選擇顏色。 可以設(shè)置全局的調(diào)色盤，也可以設(shè)置系列自己專屬的調(diào)色盤。
option = {
// 全局調(diào)色盤。
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
series: [{
type: 'bar',
// 此系列自己的調(diào)色盤。
color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
//...
}, {
type: 'pie',
// 此系列自己的調(diào)色盤。
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
//...
}]
}
直接的樣式設(shè)置 itemStyle, lineStyle, areaStyle, label, ...
直接的樣式設(shè)置是比較常用設(shè)置方式。縱觀 ECharts 的 option 中，很多地方可以設(shè)置 itemStyle、lineStyle、areaStyle、label 等等。這些的地方可以直接設(shè)置圖形元素的顏色、線寬、點(diǎn)的大小、標(biāo)簽的文字、標(biāo)簽的樣式等等。
一般來(lái)說，ECharts 的各個(gè)系列和組件，都遵從這些命名習(xí)慣，雖然不同圖表和組件中，itemStyle、label 等可能出現(xiàn)在不同的地方。
直接樣式設(shè)置的另一篇介紹，參見 個(gè)性化圖表的樣式。
高亮的樣式：emphasis
在鼠標(biāo)懸浮到圖形元素上時(shí)，一般會(huì)出現(xiàn)高亮的樣式。默認(rèn)情況下，高亮的樣式是根據(jù)普通樣式自動(dòng)生成的。但是高亮的樣式也可以自己定義，主要是通過 emphasis 屬性來(lái)定制。emphsis 中的結(jié)構(gòu)，和普通樣式的結(jié)構(gòu)相同，例如：
option = {
series: {
type: 'scatter',
// 普通樣式。
itemStyle: {
// 點(diǎn)的顏色。
color: 'red'
},
label: {
show: true,
// 標(biāo)簽的文字。
formatter: 'This is a normal label.'
},
// 高亮樣式。
emphasis: {
itemStyle: {
// 高亮?xí)r點(diǎn)的顏色。
color: 'blue'
},
label: {
show: true,
// 高亮?xí)r標(biāo)簽的文字。
formatter: 'This is a emphasis label.'
}
}
}
}
注意：在 ECharts4 以前，高亮和普通樣式的寫法，是這樣的：
option = {
series: {
type: 'scatter',
itemStyle: {
// 普通樣式。
normal: {
// 點(diǎn)的顏色。
color: 'red'
},
// 高亮樣式。
emphasis: {
// 高亮?xí)r點(diǎn)的顏色。
color: 'blue'
}
},
label: {
// 普通樣式。
normal: {
show: true,
// 標(biāo)簽的文字。
formatter: 'This is a normal label.'
},
// 高亮樣式。
emphasis: {
show: true,
// 高亮?xí)r標(biāo)簽的文字。
formatter: 'This is a emphasis label.'
}
}
}
}
這種寫法 仍然被兼容，但是，不再推薦。事實(shí)上，多數(shù)情況下，使用者只會(huì)配置普通狀態(tài)下的樣式，而使用默認(rèn)的高亮樣式。所以在 ECharts4 中，支持不寫 normal 的配置方法（即本文開頭的那種寫法），使得配置項(xiàng)更扁平簡(jiǎn)單。
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/echarts.min.js"></script>
<script src="js/macarons.js"></script>
</head>
<body>
<!-- 為 ECharts 準(zhǔn)備一個(gè)具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'), 'macarons');
myChart.setOption({
series : [
{
name: '訪問來(lái)源',
type: 'pie', // 設(shè)置圖表類型為餅圖
radius: '55%', // 餅圖的半徑，外半徑為可視區(qū)尺寸（容器高寬中較小一項(xiàng)）的 55% 長(zhǎng)度。
// 高亮樣式。
emphasis: {
itemStyle: {
// 高亮?xí)r點(diǎn)的顏色
color: 'red'
},
label: {
show: true,
// 高亮?xí)r標(biāo)簽的文字
formatter: '高亮?xí)r顯示的標(biāo)簽內(nèi)容'
}
},
data:[ // 數(shù)據(jù)數(shù)組，name 為數(shù)據(jù)項(xiàng)名稱，value 為數(shù)據(jù)項(xiàng)值
{value:235, name:'視頻廣告'},
{value:274, name:'聯(lián)盟廣告'},
{value:310, name:'郵件營(yíng)銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
]
}
]
})
</script>
</body>
</html>
通過 visualMap 組件設(shè)定樣式
visualMap 組件 能指定數(shù)據(jù)到顏色、圖形尺寸的映射規(guī)則，詳見 數(shù)據(jù)的視覺映射。
