4. ECharts 樣式設(shè)置

樣式設(shè)置的幾種方式，他們的功能范疇可能會有交叉（即同一種細(xì)節(jié)的效果可能可以用不同的方式實(shí)現(xiàn)），但是他們各有各的場景偏好。

  • 顏色主題（Theme）
  • 調(diào)色盤
  • 直接樣式設(shè)置（itemStyle、lineStyle、areaStyle、label、...）
  • 視覺映射（visualMap）

其他關(guān)于樣式的文章，參見：個性化圖表的樣式，數(shù)據(jù)的視覺映射。

顏色主題（Theme）

最簡單的更改全局樣式的方式，是直接采用顏色主題（theme）。例如，在 示例集合 中，可以選擇 “Theme”，直接看到采用主題的效果。

ECharts4 開始，除了一貫的默認(rèn)主題外，新內(nèi)置了兩套主題，分別為 'light' 和 'dark'?？梢赃@么來使用它們：

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

或者

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

其他的主題，沒有內(nèi)置在 ECharts 中，需要自己加載。這些主題可以在 主題編輯器 里訪問到。也可以使用這個主題編輯器，自己編輯主題。下載下來的主題可以這樣使用：

image.png

如果主題保存為 JSON 文件，那么可以自行加載和注冊，例如：

// 假設(shè)主題名稱是 "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 文件后（假設(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)備一個具備大?。▽捀撸┑?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: '訪問來源',
                        type: 'pie',    // 設(shè)置圖表類型為餅圖
                        radius: '55%',  // 餅圖的半徑，外半徑為可視區(qū)尺寸（容器高寬中較小一項(xiàng)）的 55% 長度。
                        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:'郵件營銷'},
                            {value:335, name:'直接訪問'},
                            {value:400, name:'搜索引擎'}
                        ]
                    }
                ]
            })
        </script>
        
    </body>
</html>
image.png

調(diào)色盤

調(diào)色盤，可以在 option 中設(shè)置。它給定了一組顏色，圖形、系列會自動從其中選擇顏色。 可以設(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)簽的樣式等等。

一般來說，ECharts 的各個系列和組件，都遵從這些命名習(xí)慣，雖然不同圖表和組件中，itemStyle、label 等可能出現(xiàn)在不同的地方。

直接樣式設(shè)置的另一篇介紹，參見 個性化圖表的樣式。

高亮的樣式：emphasis

在鼠標(biāo)懸浮到圖形元素上時(shí)，一般會出現(xiàn)高亮的樣式。默認(rèn)情況下，高亮的樣式是根據(jù)普通樣式自動生成的。但是高亮的樣式也可以自己定義，主要是通過 emphasis 屬性來定制。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ù)情況下，使用者只會配置普通狀態(tài)下的樣式，而使用默認(rèn)的高亮樣式。所以在 ECharts4 中，支持不寫 normal 的配置方法（即本文開頭的那種寫法），使得配置項(xiàng)更扁平簡單。

實(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)備一個具備大?。▽捀撸┑?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: '訪問來源',
                        type: 'pie',    // 設(shè)置圖表類型為餅圖
                        radius: '55%',  // 餅圖的半徑，外半徑為可視區(qū)尺寸（容器高寬中較小一項(xiàng)）的 55% 長度。
                        
                        // 高亮樣式。
                        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:'郵件營銷'},
                            {value:335, name:'直接訪問'},
                            {value:400, name:'搜索引擎'}
                        ]
                    }
                ]
            })
        </script>
        
    </body>
</html>
image.png

通過 visualMap 組件設(shè)定樣式

visualMap 組件 能指定數(shù)據(jù)到顏色、圖形尺寸的映射規(guī)則，詳見 數(shù)據(jù)的視覺映射。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容