echarts实现环状图显⽰总数，并在hover时显⽰⾃定义数据
实现饼图中间显⽰总数功能，版本：“echarts”: “^4.2.1”
在⽹上看到了⼏个前辈给出的饼图显⽰总数的实现⽅法，本⽅法采⽤了title来显⽰总数，但出现了⾼亮不显⽰内容的bug，具体情况如下代码部分
InitroundPie(){
this.chart = echarts.init(this.$refs[this.bindRef])
let _data =[// 当前写死
{ value:120, name:'在线'},
{ value:120, name:'离线'},
{ value:160, name:'未激活'}
]
let options ={
title:{
show:true,
text:'全部',// 当前写死
subtext:'400',// 当前写死
top:95,
left:115,
textAlign:'center',
textStyle:{
fontSize:'14',
fontWeight:'bold'
},
subtextStyle:{
fontSize:'20',
fontWeight:'bold'
}
},
tooltip:{
show:false,
trigger:'item',
formatter:'{a} <br/>{b}: {c} ({d}%)'
},
legend:{
orient:'vertical',
x:'right',
data:['在线','离线','未激活'],
selectedMode:false,
top:40,
formatter:function(name){
let legenTile = name +': '
for(let item of _data){
if(name === item.name) legenTile += item.value
}
return legenTile
}
},
series:[
{
name:'from',
type:'pie',
radius:['50%','70%'],
avoidLabelOverlap:false,
hoverAnimation:false,
textAlign:'center',
center:[120,120],
label:{
normal:{
show:false,
position:'center',
position:'center',
formatter:'{b}\n{c}',
align:'center',
verticalAlign:'middle'
},
emphasis:{
show:true,
textStyle:{
fontSize:'20',
fontWeight:'bold'
}
}
},
labelLine:{
normal:{
show:false
}
},
data: _data
}
]
}
this.chart.setOption(options)
('mouseover',{ seriesName:'from'},()=>{ this.chart.setOption({
title:{
show:false
}
})
})
('mouseout',{ seriesName:'from'},()=>{
this.chart.setOption({
title:{
show:true
}
})
})
},
⽅法逻辑：在⿏标移⼊时隐藏title，移出时显⽰title，此⽅法实现效果如下：
展⽰效果正常，但当⿏标悬浮⾄数据上时，title.show:false后，原始的emphasis事件失效，情况如下：
使⽤dispatchAction事件主动触发也不能触发当前选中，但能触发其它选中，使⽤其它⽅法进⾏了解决。代码如下：
InitroundPie(){
this.chart = echarts.init(this.$refs[this.bindRef])
let _data =[
{ value:120, name:'在线'},
{ value:120, name:'离线'},
{ value:160, name:'未激活'}
]
let options ={
title:{
show:true,
text:'全部',
subtext:'400',
top:95,
left:115,
textAlign:'center',
z:0,
textStyle:{
fontSize:'14',
fontWeight:'bold'
},
subtextStyle:{
fontSize:'20',
fontWeight:'bold'
}
},
tooltip:{
show:false,
trigger:'item',
alwaysShowContent:true,
formatter:'{a} <br/>{b}: {c} ({d}%)'
},
legend:{
orient:'vertical',
x:'right',
data:['在线','离线','未激活'],
selectedMode:false,
top:40,
formatter:function(name){
let legenTile = name +': '
for(let item of _data){
if(name === item.name) legenTile += item.value
}
return legenTile
}
},
series:[
{
name:'from',
type:'pie',
radius:['50%','70%'],
avoidLabelOverlap:false,
hoverAnimation:false,
textAlign:'center',
center:[120,120],
label:{
normal:{
// 此处重点，设置为显⽰
show:true,
position:'center',
formatter:'{b}\n{c}',
align:'center',
verticalAlign:'middle',
// 此处重点，字体⼤⼩设置为0
textStyle:{
fontSize:'0'
}
},
emphasis:{
show:true,
textStyle:{
fontSize:'20',
fontWeight:'bold'
},
// 同步样式
formatter:function(params){
return`{tTitle|${params.name}}\n{tSubTitle|${params.value}}`
},
rich:{
fontweight几百正常tTitle:{
fontSize:'14',
fontWeight:'bold',
lineHeight:'25'
},
tSubTitle:{
fontSize:'20',
fontWeight:'bold',
lineHeight:'25'
}
}
}
},
labelLine:{
normal:{
show:false
}
},
data: _data
}
]
}
this.chart.setOption(options)
('mouseover',{ seriesName:'from'}, params =>{
this.chart.setOption({
title:{
show:false
}
})
})
('mouseout',{ seriesName:'from'}, params =>{
this.chart.setOption({
title:{
show:true
}
})
})
}
更改后，显⽰效果如下：
⿏标悬浮⾼亮效果：
完成了预期效果，显⽰总数，⿏标移⼊显⽰当前选中数据，显⽰位置居中。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。