需求描述
需要用echarts實(shí)現(xiàn)一個(gè)圓環(huán)餅圖，在圓環(huán)中心顯示每個(gè)系列的具體數(shù)據(jù)，加載成功后圖表系列自動(dòng)高亮輪播展示；當(dāng)用戶鼠標(biāo)懸浮某一系列的圖形時(shí)，停止自動(dòng)輪播并高亮顯示該圖形，移出鼠標(biāo)后重新開(kāi)始輪播
參考代碼
option = {
series: [
{
name: 'Access From',
type: 'pie',
radius: ['56%', '64%'], // 通過(guò)設(shè)置內(nèi)徑與外徑將餅圖變?yōu)閳A環(huán)餅圖
itemStyle: {
borderRadius: 40 // 設(shè)置圓環(huán)的圓角弧度
},
emphasis: { // 設(shè)置高亮?xí)r顯示標(biāo)簽
label: {
show: true
},
scale: true, // 設(shè)置高亮?xí)r放大圖形
scaleSize: 20
},
label: { // 設(shè)置圖形標(biāo)簽樣式
show: false, // 未高亮?xí)r不顯示標(biāo)簽，否則高亮?xí)r顯示的標(biāo)簽會(huì)與靜態(tài)的標(biāo)簽重疊
position: 'center',
// 設(shè)置標(biāo)簽展示內(nèi)容,其中n5n3t3z、為echarts標(biāo)簽內(nèi)容格式器
formatter: '{d_style|n5n3t3z}{per_style|%}\n{b_style|}',
// 為標(biāo)簽內(nèi)容指定樣式，只能設(shè)置series-pie.label支持的樣式
rich:{
d_style:{
fontSize: 80
},
per_style:{
fontSize: 60
},
b_style:{
fontSize: 42
}
}
},
data: [ // 餅圖數(shù)據(jù)
{ value: 1048, name: 'Search Engine'},
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
let currentIndex = -1; // 當(dāng)前高亮圖形在餅圖數(shù)據(jù)中的下標(biāo)
let changePieInterval = setInterval(selectPie, 1000); // 設(shè)置自動(dòng)切換高亮圖形的定時(shí)器
function highlightPie() { // 取消所有高亮并高亮當(dāng)前圖形
for(var idx in option.series[0].data)
// 遍歷餅圖數(shù)據(jù)，取消所有圖形的高亮效果
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: idx
});
// 高亮當(dāng)前圖形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
}
myChart.on('mouseover', (params) => { // 用戶鼠標(biāo)懸浮到某一圖形時(shí)，停止自動(dòng)切換并高亮鼠標(biāo)懸浮的圖形
if(changePieInterval)
clearInterval(changePieInterval);
currentIndex = params.dataIndex;
highlightPie();
});
myChart.on('mouseout', (params) => { // 用戶鼠標(biāo)移出時(shí)，重新開(kāi)始自動(dòng)切換
if(changePieInterval)
clearInterval(changePieInterval);
changePieInterval = setInterval(selectPie, 1000);
});
function selectPie() { // 高亮效果切換到下一個(gè)圖形
var dataLen = option.series[0].data.length;
currentIndex = (currentIndex + 1) % dataLen;
highlightPie();
}
到這里運(yùn)行看效果
echarts圓環(huán)餅圖示例
（開(kāi)發(fā)echarts圖表時(shí)，對(duì)照配置項(xiàng)文檔和API文檔，到官網(wǎng)的在線示例中調(diào)試非常方便喲~）
餅圖標(biāo)簽相關(guān)配置項(xiàng)tips
series-pie. label：沒(méi)有任何交互時(shí)，靜態(tài)展示的標(biāo)簽（始終展示，即使設(shè)置為隱藏也可以通過(guò)這個(gè)配置項(xiàng)規(guī)定餅圖標(biāo)簽的樣式）
series-pie. select. label：當(dāng)系列設(shè)置“selected”為true時(shí)展示的標(biāo)簽（設(shè)置series的selectedMode和data項(xiàng)的selected為true后始終展示）
series-pie.emphasis. label：當(dāng)鼠標(biāo)懸浮或通過(guò)代碼觸發(fā)高亮?xí)r才會(huì)展示的標(biāo)簽
餅圖plus
在公司的大屏展示項(xiàng)目中，需要實(shí)現(xiàn)類似下圖的輪播餅圖效果：
觀察此效果圖，思路如下：
①大致可以看出，此圖為一個(gè)大餅圖中嵌套小餅圖，且兩圖同步高亮；
②外圈可以用一個(gè)只有一條數(shù)據(jù)的餅圖系列實(shí)現(xiàn)（需禁用其高亮樣式）；
③選中一塊大餅圖時(shí)，需在外側(cè)顯示陰影：由于echarts沒(méi)有合適的徑向漸變顏色樣式，這里可以疊三個(gè)透明度遞減的較大餅圖實(shí)現(xiàn)；將這3層陰影餅圖的初始透明度設(shè)置為0（隱藏非高亮狀態(tài)的圖塊）即可
餅圖plus代碼
/* CSDN博客網(wǎng)址：https://blog.csdn.net/qq_36604536/article/details/123905221 */
/*********************** 餅圖構(gòu)造相關(guān) ***********************/
// 餅圖配色（自定義）
const chartColorList = ["#5470c6", "#91cc75", "#ffdc60", "#ee6666", "#73c0de"];
// 餅圖測(cè)試數(shù)據(jù)
let testData = [
{value: 1048, name: 'Search Engine'},
{value: 735, name: 'Direct'},
{value: 580, name: 'Email'},
{value: 484, name: 'Union Ads'},
{value: 300, name: 'Video Ads'}
];
// 由于這套餅圖中除了“大餅”外的餅圖構(gòu)造非常相似（只有“大餅”高亮?xí)r顯示中間的標(biāo)簽）
// 可以用一個(gè)數(shù)組存儲(chǔ)其中不相同的配置，然后遍歷配置數(shù)組自動(dòng)生成所有serie
const pieSeriesSettings = [
{
name: '內(nèi)部小餅', // 餅圖名稱
radius: ['46%', '53%'], // 餅圖內(nèi)徑/外徑尺寸
opacity: 0.56, // 普通狀態(tài)下的透明度
empyOpacity: 0.6, // 高亮狀態(tài)下的透明度
scaleSize: 14, // 高亮狀態(tài)下圖形放大的尺寸
isBorder: false // 是否是外圈（外圈只有一條數(shù)據(jù)，否則與“大餅”數(shù)據(jù)相同）
},
{
name: '外圈', radius: ['80%', '82%'], opacity: 0.6, empyOpacity: 0.6, scaleSize: 10, isBorder: true
},
{
name: '大餅陰影1', radius: ['50%', '65%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
},
{
name: '大餅陰影2', radius: ['51%', '66%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
},
{
name: '大餅陰影3', radius: ['52%', '67%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
},
{
name: '大餅陰影4', radius: ['53%', '68%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
},
{
name: '大餅陰影5', radius: ['54%', '69%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
},
{
name: '大餅陰影6', radius: ['55%', '70%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
}
];
let serieList = [];
serieList.push({
name: '大餅',
z: 10, // 放在最上層
type: 'pie',
radius: ['56%', '63%'], // 通過(guò)設(shè)置內(nèi)徑與外徑將餅圖變?yōu)閳A環(huán)餅圖
itemStyle: {
borderRadius: 40 // 設(shè)置圓環(huán)的圓角弧度
},
emphasis: { // 設(shè)置高亮?xí)r顯示標(biāo)簽
label: {
show: true
},
scale: true, // 設(shè)置高亮?xí)r放大圖形
scaleSize: 18
},
label: { // 設(shè)置圖形標(biāo)簽樣式
show: false, // 未高亮?xí)r不顯示標(biāo)簽，否則高亮?xí)r顯示的標(biāo)簽會(huì)與靜態(tài)的標(biāo)簽重疊
position: 'center',
// 設(shè)置標(biāo)簽展示內(nèi)容,其中n5n3t3z、為echarts標(biāo)簽內(nèi)容格式器
formatter: '{d_style|n5n3t3z}{per_style|%}\n{b_style|}',
// 為標(biāo)簽內(nèi)容指定樣式，只能設(shè)置series-pie.label支持的樣式
rich: {
d_style: {
fontSize: 80
},
per_style: {
fontSize: 60
},
b_style: {
fontSize: 42
}
}
},
data: testData
});
for (let pieSetting of pieSeriesSettings) {
serieList.push({
name: pieSetting.name,
z: 1, // 放在最下層
type: 'pie',
radius: pieSetting.radius, // 通過(guò)設(shè)置內(nèi)徑與外徑將餅圖變?yōu)閳A環(huán)餅圖
itemStyle: {
color: pieSetting.isBorder ? '#fff' : null,
borderRadius: 40, // 設(shè)置圓環(huán)的圓角弧度
opacity: pieSetting.opacity // 設(shè)置普通狀態(tài)下圓環(huán)的透明度
},
emphasis: { // 設(shè)置高亮?xí)r不顯示標(biāo)簽
disabled: pieSetting.isBorder, // 外圈需關(guān)閉高亮效果
itemStyle: {
opacity: pieSetting.empyOpacity // 設(shè)置高亮狀態(tài)下圓環(huán)的透明度
},
label: {
show: false
},
scale: !pieSetting.isBorder, // 外圈需關(guān)閉高亮放大效果
scaleSize: pieSetting.scaleSize
},
label: { // 設(shè)置圖形標(biāo)簽樣式
show: false // 未高亮?xí)r不顯示標(biāo)簽，否則高亮?xí)r顯示的標(biāo)簽會(huì)與靜態(tài)的標(biāo)簽重疊
},
data: pieSetting.isBorder ? [{value: 1, name: 'border'}] : testData
});
}
option = {
backgroundColor: "#000002",
color: chartColorList, // 設(shè)置餅圖全局配色
tooltip: { // 設(shè)置懸停標(biāo)簽
trigger: "item",
formatter: params => {
// console.log(params)
if(params.seriesName === "大餅") { // 只有在大餅上懸停時(shí)顯示提示框
return `${params.name}<br/>數(shù)量：${params.value}<br/>占比：${params.percent}`
} else {
return ''
}
}
},
series: serieList
};
console.log(option); // 可以打印出具體的option便于理解其結(jié)構(gòu)
/*********************** 餅圖輪播相關(guān) ***********************/
let currentIndex = -1; // 當(dāng)前高亮圖形在餅圖數(shù)據(jù)中的下標(biāo)
let changePieInterval = setInterval(selectPie, 1000); // 設(shè)置自動(dòng)切換高亮圖形的定時(shí)器
function highlightPie() { // 取消所有高亮并高亮當(dāng)前圖形
// 顯示當(dāng)前圖形的tooltip
myChart.dispatchAction({ // 隱藏所有tooltip
type: 'hideTip'
})
myChart.dispatchAction({ // 顯示當(dāng)前圖形的tooltip
type: 'showTip',
seriesIndex: 0, // 大餅在序列列表第一個(gè)
dataIndex: currentIndex
})
for (let optIdx in option.series) {
let opt = option.series[optIdx].data;
if (opt.length < 2) // 外圈（只有一條數(shù)據(jù)）
continue;
// 遍歷餅圖數(shù)據(jù)，取消所有圖形的高亮效果, 高亮當(dāng)前圖形
for (let idx in opt)
myChart.dispatchAction({
type: idx != currentIndex ? 'downplay' : 'highlight',
seriesIndex: optIdx,
dataIndex: idx
});
}
}
myChart.on('mouseover', (params) => { // 用戶鼠標(biāo)懸浮到某一圖形時(shí)，停止自動(dòng)切換并高亮鼠標(biāo)懸浮的圖形
if (params.seriesName === "外圈") // 鼠標(biāo)懸浮到外圈時(shí)，不進(jìn)行交互
return;
if(changePieInterval)
clearInterval(changePieInterval);
currentIndex = params.dataIndex;
highlightPie();
});
myChart.on('mouseout', (params) => { // 用戶鼠標(biāo)移出時(shí)，重新開(kāi)始自動(dòng)切換
if(changePieInterval)
clearInterval(changePieInterval);
changePieInterval = setInterval(selectPie, 1000);
});
function selectPie() { // 高亮效果切換到下一個(gè)圖形
var dataLen = testData.length;
currentIndex = (currentIndex + 1) % dataLen;
highlightPie();
}
還是到這里運(yùn)行看效果
echarts圓環(huán)餅圖示例
關(guān)于餅圖發(fā)光效果
由于（在筆者的認(rèn)知范圍內(nèi)）echarts沒(méi)有提供可以完美地實(shí)現(xiàn)餅圖發(fā)光效果的方法，這里使用了疊加多層半透明餅圖模仿發(fā)光效果的方式：
作為一種實(shí)驗(yàn)性的嘗試，如果將餅圖plus中添加的陰影數(shù)量增加至6個(gè)，得到的展示效果更接近“發(fā)光”：
const pieSeriesSettings = [
{
name: '內(nèi)部小餅', // 餅圖名稱
radius: ['46%', '53%'], // 餅圖內(nèi)徑/外徑尺寸
opacity: 0.56, // 普通狀態(tài)下的透明度
empyOpacity: 0.6, // 高亮狀態(tài)下的透明度
scaleSize: 14, // 高亮狀態(tài)下圖形放大的尺寸
isBorder: false // 是否是外圈（外圈只有一條數(shù)據(jù)，否則與“大餅”數(shù)據(jù)相同）
},
{
name: '外圈', radius: ['80%', '82%'], opacity: 0.6, empyOpacity: 0.6, scaleSize: 10, isBorder: true
},
{
name: '大餅陰影1', radius: ['50%', '65%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
},
{
name: '大餅陰影2', radius: ['51%', '66%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
},
{
name: '大餅陰影3', radius: ['52%', '67%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
},
{
name: '大餅陰影4', radius: ['53%', '68%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
},
{
name: '大餅陰影5', radius: ['54%', '69%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
},
{
name: '大餅陰影6', radius: ['55%', '70%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
}
];
最終的發(fā)光餅圖在線示例：isqqw-多層輪播餅圖
追加需求：顯示當(dāng)前圖形的提示框
在評(píng)論區(qū)看到有小伙伴提問(wèn)，本雜魚(yú)嘗試實(shí)現(xiàn)此效果后在此記錄，效果如下圖：
詳細(xì)代碼已更新到isqqw-多層輪播餅圖，具體改動(dòng)內(nèi)容有兩處：
① 配置tooltip
tooltip配置項(xiàng)與series同級(jí)，由于此圖表中有不止一個(gè)餅圖系列，需要設(shè)置僅顯示“大餅”的tooltip；標(biāo)簽內(nèi)容配置可參考這篇博客：echarts：餅圖標(biāo)簽formatter的使用/餅圖自定義標(biāo)簽。
② 輪播時(shí)顯示選中圖形的tooltip
與高亮/取消高亮類似，顯示/隱藏提示框也可以通過(guò)dispatchAction觸發(fā)圖表行為來(lái)實(shí)現(xiàn)，可參考action. tooltip。
此外，tooltip會(huì)根據(jù)懸停在圖形上鼠標(biāo)的位置來(lái)顯示，通過(guò)dispatchAction觸發(fā)顯示時(shí)其位置可能不太美觀，官網(wǎng)文檔中支持指定showTip的(x, y)坐標(biāo)觸發(fā)，也許可以自行計(jì)算tooltip出現(xiàn)的理想位置坐標(biāo)進(jìn)行觸發(fā)，這一點(diǎn)請(qǐng)感興趣的小伙伴自行探討叭~
比官網(wǎng)更豐富的echarts示例！
強(qiáng)烈推薦一個(gè)有非常豐富的echarts在線示例的網(wǎng)站：PPChart，但由于遭到DDOS攻擊，PPChart服務(wù)不太穩(wěn)定，大家也可以訪問(wèn)PPChart開(kāi)發(fā)者推薦的另外兩個(gè)站點(diǎn)：madeapie、isqqw，目前筆者關(guān)于echarts的博客代碼都已在isqqw創(chuàng)建在線示例o^~^o文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-647302.html
參考文檔
[1] echarts圓環(huán)餅圖示例
[2] echarts餅圖配置項(xiàng)
[3] echarts標(biāo)簽內(nèi)容格式器
[4] echarts事件與行為
[5] echarts鼠標(biāo)事件文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-647302.html
到了這里，關(guān)于echarts餅圖：實(shí)現(xiàn)多層圖表同步自動(dòng)輪播，鼠標(biāo)懸浮時(shí)停止輪播，移出鼠標(biāo)后重新開(kāi)始輪播效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
