echarts 饼图hover效果，饼图中间显示自定义信息

最新推荐文章于 2025-04-16 17:32:35 发布

吾日三省吾身记

最新推荐文章于 2025-04-16 17:32:35 发布

阅读量1.4w

点赞数 2

分类专栏： echarts 文章标签： echarts tooltip echarts 饼图中心样式

本文链接：https://blog.youkuaiyun.com/qq_23939075/article/details/72639641

版权

echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Echarts配置饼图，实现hover时在图表中心显示自定义信息的效果，通过调整tooltip的position百分比来控制信息位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

option = {

tooltip: {
    show:true,
    trigger: 'item',
    position: ['35%', '32%'],
    backgroundColor: 'implements',
    textStyle:{
        color: '#000000',
        fontStyle: 'normal',
        fontWeight: 'normal',
        fontFamily: 'sans-serif',
        fontSize: 14,
    },
    formatter: function(params){
        return formatter(params);
    }
},

legend: {
orient: 'vertical',
x: 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series: [
{
name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]

};

   //饼图中心字体样式
function formatter(params){
       var div = $('<div>');
       var spanPublic = $('<span style="font-size: 12px; color: #AFB0AF;">');
       var span = $('<span style="font-size: 14px;">').text('');
       var spanTop = spanPublic.clone().text(params.name);
       var spanBottom = span.clone().text(params.value).append(spanPublic.clone().text('间夜'));
       var spanRate = spanPublic.clone().text(params.percent+'%');
       var br = $('</br>');
   var all = div.append(spanTop).append(br.clone()).append(spanBottom).append(br.clone()).append(spanRate);
       return all[0].innerHTML;
}