ECharts 樣式設定介紹

語言: CN / TW / HK
ECharts 可以通過樣式設定來改變圖形元素或者文字的顏色、明暗、大小等。
顏色主題

ECharts4 開始,除了預設主題外,內建了兩套主題,分別為 light 和 dark。

使用方式如下:

例項

var chart = echarts.init(dom, 'light'); 
或者
var chart = echarts.init(dom, 'dark');

嘗試一下 »
另外,我們也可以在官方的 主題編輯器 選擇自己喜歡的主題下載。

ECharts 樣式設定介紹ECharts 樣式設定介紹

目前主題下載提供了 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')
})

嘗試一下 »

調色盤

調色盤可以在 option 中設定。

調色盤給定了一組顏色,圖形、系列會自動從其中選擇顏色。

可以設定全域性的調色盤,也可以設定系列自己專屬的調色盤。

option = {
    // 全域性調色盤。
    color: ['#c23531','#2f4554',style="color: #3366CC;">'#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'],         ...     }] }

全域性調色盤例項:

例項

series: [{
    type: 'pie',
    // 此係列自己的調色盤。
    color: ['#ff0000','#00ff00', '#0000ff', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
    ...

}]
直接的樣式設定 itemStyle, lineStyle, areaStyle, label, ...

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

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

直接樣式設定的另一篇介紹,參見 ECharts 餅圖。

高亮的樣式:emphasis

在滑鼠懸浮到圖形元素上時,一般會出現高亮的樣式。預設情況下,高亮的樣式是根據普通樣式自動生成的。

如果要自定義高亮樣式可以通過 emphasis 屬性來定製:

例項

// 高亮樣式。

emphasis: {

    itemStyle: {

        // 高亮時點的顏色

        color: 'red'

    },

    label: {

        show: true,

        // 高亮時標籤的文字

        formatter: '高亮時顯示的標籤內容'

    }

},

嘗試一下 »

本文地址:https://www.linuxprobe.com/echarts-style-setting.html