ECharts 可以通過樣式設定來改變圖形元素或者文字的顔色、明暗、大小等。
ECharts4 開始，除了預設主題外，内置了兩套主題，分别為 light 和 dark。
使用方式如下：
var chart = echarts.init(dom, 'light');
或者
var chart = echarts.init(dom, 'dark');
另外，我們也可以在官方的 主題編輯器 選擇自己喜歡的主題下載下傳。
目前主題下載下傳提供了 JS 版本和 JSON 版本。
如果你使用 JS 版本，可以将 JS 主題代碼儲存一個 主題名.js 檔案，然後在 HTML 中引用該檔案，最後在代碼中使用該主題。
比如上圖中我們選中了一個主題，将 JS 代碼儲存為 wonderland.js。
<!-- 引入主題 -->
<script src="https://www.runoob.com/static/js/wonderland.js"></script>
...
// HTML 引入 wonderland.js 檔案後，在初始化的時候調用
var myChart = echarts.init(dom, 'wonderland');
// ...
如果主題儲存為 JSON 檔案，那麼可以自行加載和注冊。
比如上圖中我們選中了一個主題，将 JSON 代碼儲存為 wonderland.json。
//主題名稱是 wonderland
$.getJSON('wonderland.json', function (themeJSON) {
echarts.registerTheme('wonderland', themeJSON)
var myChart = echarts.init(dom, 'wonderland');
});
注意：我們使用了 $.getJSON，是以需要引入 jQuery。
調色盤可以在 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'],
}]
}
全局調色盤執行個體：
// 全局調色盤。
color: ['#ff0000','#00ff00', '#0000ff', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
系列調色盤執行個體：
series: [{
type: 'pie',
// 此系列自己的調色盤。
color: ['#ff0000','#00ff00', '#0000ff', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
...
}]
直接的樣式設定是比較常用設定方式。縱觀 ECharts 的 option 中，很多地方可以設定 itemStyle、lineStyle、areaStyle、label 等等。這些的地方可以直接設定圖形元素的顔色、線寬、點的大小、标簽的文字、标簽的樣式等等。
一般來說，ECharts 的各個系列群組件，都遵從這些命名習慣，雖然不同圖表群組件中，<code>itemStyle</code>、<code>label</code> 等可能出現在不同的地方。
直接樣式設定的另一篇介紹，參見 ECharts 餅圖。
在滑鼠懸浮到圖形元素上時，一般會出現高亮的樣式。預設情況下，高亮的樣式是根據普通樣式自動生成的。
如果要自定義高亮樣式可以通過 emphasis 屬性來定制：
// 高亮樣式。
emphasis: {
itemStyle: {
// 高亮時點的顔色
color: 'red'
},
label: {
show: true,
// 高亮時标簽的文字
formatter: '高亮時顯示的标簽内容'
}
},