ECharts 提供了豐富的自定義配置選項(xiàng)练慕，并且能夠從全局煎楣、系列既峡、數(shù)據(jù)三個(gè)層級(jí)去設(shè)置數(shù)據(jù)圖形的樣式。下面我們來(lái)看如何使用 ECharts 實(shí)現(xiàn)下面這個(gè)南丁格爾圖：
繪制南丁格爾圖
這次要畫的是餅圖匀归，餅圖主要是通過(guò)扇形的弧度表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比坑资，它的數(shù)據(jù)格式比柱狀圖更簡(jiǎn)單，只有一維的數(shù)值穆端，不需要給類目袱贮。因?yàn)椴辉谥苯亲鴺?biāo)系上，所以也不需要xAxis体啰，yAxis攒巍。
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
myChart.setOption({
series : [
{
name: '訪問(wèn)來(lái)源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'視頻廣告'},
{value:274, name:'聯(lián)盟廣告'},
{value:310, name:'郵件營(yíng)銷'},
{value:335, name:'直接訪問(wèn)'},
{value:400, name:'搜索引擎'}
]
}
]
})
上面代碼就能畫出一個(gè)簡(jiǎn)單的餅圖：
這里data屬性值不像入門教程里那樣每一項(xiàng)都是單個(gè)數(shù)值荒勇，而是一個(gè)包含 name 和 value 屬性的對(duì)象窑业，ECharts 中的數(shù)據(jù)項(xiàng)都是既可以只設(shè)成數(shù)值，也可以設(shè)成一個(gè)包含有名稱枕屉、該數(shù)據(jù)圖形的樣式配置常柄、標(biāo)簽配置的對(duì)象，具體見(jiàn) data 文檔搀擂。
ECharts 中的餅圖也支持通過(guò)設(shè)置 roseType 顯示成南丁格爾圖西潘。
roseType: 'angle'
南丁格爾圖會(huì)通過(guò)半徑表示數(shù)據(jù)的大小。
陰影的配置
ECharts 中有一些通用的樣式哨颂，諸如陰影喷市、透明度、顏色威恼、邊框顏色品姓、邊框?qū)挾鹊龋@些樣式一般都會(huì)在系列的 itemStyle 里設(shè)置箫措。例如陰影的樣式可以通過(guò)下面幾個(gè)配置項(xiàng)設(shè)置：
itemStyle: {
// 陰影的大小
shadowBlur: 200,
// 陰影水平方向上的偏移
shadowOffsetX: 0,
// 陰影垂直方向上的偏移
shadowOffsetY: 0,
// 陰影顏色
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
加上陰影后的效果：
itemStyle的emphasis是鼠標(biāo) hover 時(shí)候的高亮樣式腹备。這個(gè)示例里是正常的樣式下加陰影，但是可能更多的時(shí)候是 hover 的時(shí)候通過(guò)陰影突出斤蔓。
itemStyle: {
emphasis: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
深色背景和淺色標(biāo)簽
現(xiàn)在我們需要把整個(gè)主題改成開(kāi)始的示例中那樣的深色主題植酥，這就需要改背景色和文本顏色。
背景色是全局的弦牡，所以直接在 option 下設(shè)置 backgroundColor
setOption({
backgroundColor: '#2c343c'
})
文本的樣式可以設(shè)置全局的 textStyle友驮。
setOption({
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
})
也可以每個(gè)系列分別設(shè)置，每個(gè)系列的文本設(shè)置在 label.textStyle驾锰。
label: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
餅圖的話還要將標(biāo)簽的視覺(jué)引導(dǎo)線的顏色設(shè)為淺色卸留。
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
如下：
跟itemStyle一樣，label和labelLine的樣式也有emphasis狀態(tài)椭豫。
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/echarts.min.js"></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'));
myChart.setOption({
backgroundColor: '#2c343c',
series : [
{
name: '訪問(wèn)來(lái)源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'視頻廣告'},
{value:274, name:'聯(lián)盟廣告'},
{value:310, name:'郵件營(yíng)銷'},
{value:335, name:'直接訪問(wèn)'},
{value:400, name:'搜索引擎'}
],
roseType: 'angle',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
</script>
</body>
</html>
