建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
Echarts 繪制南丁格爾圖
Echarts 可以自定義配置選項(xiàng)；
Echarts 設(shè)置數(shù)據(jù)圖形的樣式可以從三個(gè)層級(jí)入手，分別是：全局、系列和數(shù)據(jù)。
下面我們使用 Echarts 來(lái)實(shí)現(xiàn)如下的一個(gè)南丁格爾圖：
點(diǎn)擊編輯實(shí)例 》》
開(kāi)始繪制南丁格爾圖
與第一節(jié)繪制的圖表樣式不同，本節(jié)我們要繪制的是餅圖（第一節(jié)是柱狀圖）。
餅圖是根據(jù)明顯的扇形弧度的不同來(lái)表達(dá)不同類(lèi)目的數(shù)據(jù)占據(jù)的總數(shù)的百分比。相比于柱狀圖，餅圖的數(shù)據(jù)格式更加簡(jiǎn)單，它數(shù)值是一維的，無(wú)需給出類(lèi)目。
餅圖不在直角坐標(biāo)系上實(shí)現(xiàn)，自然也不需要 xAxis 和 yAxis。
利用下述代碼繪制出一個(gè)簡(jiǎn)單的餅圖：
myChart.setOption({
series : [
{
name: '訪(fǎng)問(wèn)來(lái)源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'視頻廣告'},
{value:274, name:'聯(lián)盟廣告'},
{value:310, name:'郵件營(yíng)銷(xiāo)'},
{value:335, name:'直接訪(fǎng)問(wèn)'},
{value:400, name:'搜索引擎'}
]
}
]
})圖形顯示結(jié)果：
點(diǎn)擊編輯實(shí)例 》》
ECharts 中的數(shù)據(jù)項(xiàng)既可以只設(shè)成數(shù)值，也可以設(shè)為一個(gè)包含有名稱(chēng)、該數(shù)據(jù)圖形的樣式配置、標(biāo)簽配置的對(duì)象，具體見(jiàn) data 文檔。
比如上述代碼中的 data 屬性值是一個(gè)包含 name 和 value 屬性的對(duì)象，而不像第一節(jié)里那樣每一項(xiàng)都是單個(gè)數(shù)值。
ECharts 中的 餅圖 也支持通過(guò)設(shè)置 roseType 顯示成南丁格爾圖，操作如下：
roseType: 'angle'顯示出的南丁格爾圖通過(guò)半徑表示數(shù)據(jù)的大?。?/p>
點(diǎn)擊編輯實(shí)例 》》
Echarts 配置陰影
建立好一個(gè)基本的南丁格爾圖后，我們可以為其添加一些通用的樣式，例如陰影、透明度、顏色、邊框顏色、邊框?qū)挾鹊取?/p>
Echarts 的這些樣式通常都是在系列的 itemStyle 中設(shè)置的。
下面來(lái)看看 Echarts 中陰影樣式的配置：
itemStyle: {
normal: {
// 陰影的大小
shadowBlur: 200,
// 陰影水平方向上的偏移
shadowOffsetX: 0,
// 陰影垂直方向上的偏移
shadowOffsetY: 0,
// 陰影顏色
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}加上陰影后顯示的效果如下：
點(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)簽
接下來(lái)我們通過(guò)修改背景顏色和文本顏色來(lái)把上述實(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)簽的視覺(jué)引導(dǎo)線(xiàn)的顏色設(shè)置為淺色，操作如下：
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
}最終的餅圖效果顯示如下：
點(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)'
}
}效果顯示如下：
點(diǎn)擊編輯實(shí)例 》》
現(xiàn)在已經(jīng)很接近我們要實(shí)現(xiàn)的效果了，接下來(lái)我們來(lái)實(shí)現(xiàn)圖形的層次感和空間感。
ECharts 中每個(gè)扇形顏色的可以通過(guò)分別設(shè)置 data 下的數(shù)據(jù)項(xiàng)實(shí)現(xiàn)，操作如下：
data: [{
value:400,
name:'搜索引擎',
itemStyle: {
normal: {
color: '#c23531'
}
}
}, ...]其實(shí)我們可以使用一種更快捷的方式來(lái)體現(xiàn)明暗度的變化，即通過(guò) visualMap 組件將數(shù)值的大小映射到明暗度，操作如下：
visualMap: {
// 不顯示 visualMap 組件，只用于明暗度的映射
show: false,
// 映射的最小值為 80
min: 80,
// 映射的最大值為 600
max: 600,
inRange: {
// 明暗度的范圍是 0 到 1
colorLightness: [0, 1]
}
}我們得到的最終效果如下圖所示：
點(diǎn)擊編輯實(shí)例 》》
以下是一個(gè)南丁格爾圖簡(jiǎn)單示例：
cdcxhl.com(www.cdcxhl.com)
嘗試一下
網(wǎng)站名稱(chēng)：創(chuàng)新互聯(lián)ECharts教程：ECharts個(gè)性化圖表樣式的實(shí)現(xiàn)
當(dāng)前地址：http://fisionsoft.com.cn/article/djiohsh.html
