ECharts個(gè)性化圖表樣式的實(shí)現(xiàn)

2020-08-11 10:27 更新

Echarts 繪制南丁格爾圖

Echarts 可以自定義配置選項(xiàng)；

Echarts 設(shè)置數(shù)據(jù)圖形的樣式可以從三個(gè)層級(jí)入手，分別是：全局、系列和數(shù)據(jù)。

下面我們使用 Echarts 來實(shí)現(xiàn)如下的一個(gè)南丁格爾圖：

Echarts 繪制南丁格爾圖

點(diǎn)擊編輯實(shí)例 》》

開始繪制南丁格爾圖

與第一節(jié)繪制的圖表樣式不同，本節(jié)我們要繪制的是餅圖（第一節(jié)是柱狀圖）。

餅圖是根據(jù)明顯的扇形弧度的不同來表達(dá)不同類目的數(shù)據(jù)占據(jù)的總數(shù)的百分比。相比于柱狀圖，餅圖的數(shù)據(jù)格式更加簡(jiǎn)單，它數(shù)值是一維的，無需給出類目。

餅圖不在直角坐標(biāo)系上實(shí)現(xiàn)，自然也不需要 xAxis 和 yAxis。

利用下述代碼繪制出一個(gè)簡(jiǎn)單的餅圖：

myChart.setOption({
    series : [
        {
            name: '訪問來源',
            type: 'pie',
            radius: '55%',
            data:[
                {value:235, name:'視頻廣告'},
                {value:274, name:'聯(lián)盟廣告'},
                {value:310, name:'郵件營(yíng)銷'},
                {value:335, name:'直接訪問'},
                {value:400, name:'搜索引擎'}
            ]
        }
    ]
})

圖形顯示結(jié)果：

Echarts 圖表繪制

點(diǎn)擊編輯實(shí)例 》》

ECharts 中的數(shù)據(jù)項(xiàng)既可以只設(shè)成數(shù)值，也可以設(shè)為一個(gè)包含有名稱、該數(shù)據(jù)圖形的樣式配置、標(biāo)簽配置的對(duì)象，具體見 data 文檔。

比如上述代碼中的 data 屬性值是一個(gè)包含 name 和 value 屬性的對(duì)象，而不像第一節(jié)里那樣每一項(xiàng)都是單個(gè)數(shù)值。

ECharts 中的 餅圖 也支持通過設(shè)置 roseType 顯示成南丁格爾圖，操作如下：

roseType: 'angle'

顯示出的南丁格爾圖通過半徑表示數(shù)據(jù)的大?。?/p>

Echarts 南丁格爾圖數(shù)據(jù)大小表示法

點(diǎn)擊編輯實(shí)例 》》

Echarts 配置陰影

建立好一個(gè)基本的南丁格爾圖后，我們可以為其添加一些通用的樣式，例如陰影、透明度、顏色、邊框顏色、邊框?qū)挾鹊取?/p>

Echarts 的這些樣式通常都是在系列的 itemStyle 中設(shè)置的。

下面來看看 Echarts 中陰影樣式的配置：

itemStyle: {
    normal: {
        // 陰影的大小
        shadowBlur: 200,
        // 陰影水平方向上的偏移
        shadowOffsetX: 0,
        // 陰影垂直方向上的偏移
        shadowOffsetY: 0,
        // 陰影顏色
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}

加上陰影后顯示的效果如下：

Echarts 圖表陰影效果顯示

點(diǎn)擊編輯實(shí)例 》》

在 itemStyle 中有 normal 和 emphasis 兩個(gè)選項(xiàng)，normal 選項(xiàng)顯示的是正常展示下的樣式，emphasis 是當(dāng)鼠標(biāo) hover 時(shí)候的高亮樣式。

上述示例里使用的是 normal ，是在正常的樣式下加陰影，如果想要配置為在鼠標(biāo) hover 的時(shí)候突出陰影，可以使用下述代碼：

itemStyle: {
    emphasis: {
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}

Echarts 設(shè)置深色背景和淺色標(biāo)簽

接下來我們通過修改背景顏色和文本顏色來把上述實(shí)例的主題變?yōu)樯钌黝}。

因?yàn)楸尘吧侨值模灾苯釉?option 下設(shè)置 backgroundColor 就可以了，具體操作如下：

setOption({
    backgroundColor: '#2c343c'
})

背景色設(shè)置完成后，同樣將文本的樣式設(shè)置為全局的 textStyle，具體操作如下：

setOption({
    textStyle: {
        color: 'rgba(255, 255, 255, 0.3)'
    }
})

如果不想設(shè)置全局的文本樣式，也可以分別對(duì)每個(gè)系列進(jìn)行設(shè)置，每個(gè)系列的文本設(shè)置在 label.normal.textStyle，操作如下：

label: {
    normal: {
        textStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
}

最后，我們將實(shí)例中的餅圖的標(biāo)簽的視覺引導(dǎo)線的顏色設(shè)置為淺色，操作如下：

labelLine: {
    normal: {
        lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
}

最終的餅圖效果顯示如下：

Echarts 設(shè)置深色背景和淺色標(biāo)簽

點(diǎn)擊編輯實(shí)例 》》

注意：label 和 labelLine 的樣式有 normal 和 emphasis 兩個(gè)狀態(tài)，這與 itemStyle 相同。

Echarts 設(shè)置扇形的顏色

我們還可以根據(jù)實(shí)際需要對(duì)餅圖中扇形的顏色進(jìn)行設(shè)置，同樣，扇形顏色的設(shè)置是在 itemStyle 中，操作如下：

itemStyle: {
    normal: {
        // 設(shè)置扇形的顏色
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}

效果顯示如下：

Echarts 設(shè)置圖形的顏色

點(diǎn)擊編輯實(shí)例 》》

現(xiàn)在已經(jīng)很接近我們要實(shí)現(xiàn)的效果了，接下來我們來實(shí)現(xiàn)圖形的層次感和空間感。

ECharts 中每個(gè)扇形顏色的可以通過分別設(shè)置 data 下的數(shù)據(jù)項(xiàng)實(shí)現(xiàn)，操作如下： 

data: [{
    value:400,
    name:'搜索引擎',
    itemStyle: {
        normal: {
            color: '#c23531'
        }
    }
}, ...]

其實(shí)我們可以使用一種更快捷的方式來體現(xiàn)明暗度的變化，即通過 visualMap 組件將數(shù)值的大小映射到明暗度，操作如下：

visualMap: {
    // 不顯示 visualMap 組件，只用于明暗度的映射
    show: false,
    // 映射的最小值為 80
    min: 80,
    // 映射的最大值為 600
    max: 600,
    inRange: {
        // 明暗度的范圍是 0 到 1
        colorLightness: [0, 1]
    }
}

我們得到的最終效果如下圖所示：

Echarts 設(shè)置扇形的顏色

點(diǎn)擊編輯實(shí)例 》》


以下是一個(gè)南丁格爾圖簡(jiǎn)單示例：

<html>
<head>
    <meta charset="utf-8">
    <title>w3cschool (www.o2fo.com) </title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js" rel="external nofollow" ></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'));

            // 指定圖表的配置項(xiàng)和數(shù)據(jù)
            var option = {
                title: {
                    text: '餅狀圖--南丁格爾圖',//標(biāo)題文本內(nèi)容
                    textStyle: {//設(shè)置標(biāo)題的文本樣式
                        color: '#ffffff'
                    }
                },
                backgroundColor: '#2c343c',
                visualMap: {
                    // 不顯示 visualMap 組件，只用于明暗度的映射
                    show: false,
                    // 映射的最小值為 80
                    min: 80,
                    // 映射的最大值為 600
                    max: 600,
                    inRange: {// 明暗度的范圍是 0 到 1
                    colorLightness: [0, 1]
                    }
                },
                series: [{
                    name: '訪問來源',
                    type: 'pie',
                    radius: '55%',
                    roseType: 'angle',
                    data: [
                    {value: 400,name: '搜索引擎'}, 
                    {value: 335,name: '直接訪問'}, 
                    {value: 310,name: '郵件營(yíng)銷'}, 
                    {value: 274,name: '聯(lián)盟廣告'}, 
                    {value: 235,name: '視頻廣告'}
                    ],
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {//將標(biāo)簽的視覺引導(dǎo)線的顏色設(shè)為淺色
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    itemStyle: {//陰影的配置,還可以設(shè)置扇形的顏色，在normal中編輯color來設(shè)置，設(shè)置后的扇形顏色是一樣的
                        normal: {
                            // 陰影的大小
                            shadowBlur: 200,
                            // 陰影顏色
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
                
            };

            // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
            myChart.setOption(option);
        </script>
</body>
</html>


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)