echarts 饼图在中间显示百分比
echarts饼图在中间显示百分比,使用graphic
setEchartOption(val) {
const seriesData = [
{ value: 1048, name: '完成值' },
{ value: 735, name: '目标值' }
]
const option = {
grid: {
containLabel: true
},
tooltip: {
trigger: 'item'
},
color: ['#74A0FA', '#73DEB3'],
series: [
{
type: 'pie',
radius: ['50%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: seriesData
}
],
// 绘制中间的百分比
graphic: {
type: 'text',
left: 'center',
top: 'center',
style: {
text: Math.round((seriesData[0].value / seriesData[1].value) * 100) + '%',
textAlign: 'center',
fill: '#666666',
fontSize: 20
}
}
}
this[`chart${val}`].setOption(option)
}
本文来自博客园,作者:hong_li,转载请注明原文链接:https://www.cnblogs.com/hong1/p/18546487
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通