echarts 饼状图的label 字段太长,超出部分不显示的解决办法,并显示数据,百分比(非后台接口返回)
在 使用echarts 做饼状图,因为label 字段太长,超出部分不显示, 要求超出部分用省略号代替,
在查找文档时,未找到对应的解决方案,
在综合多个解决方案后,得到以下的解决方案
原代码:
label: {
formatter: '{name|{b}}\n{value|{d}%( {c})}',
rich: { value: { fontSize: 12, color: '#999999', 'max-width': '100px' } },
},
修改后的代码
label: {
formatter: function (param) {
console.log("text", param)
let text = param.data.name;
if (text.length < 15) {
// return '{name|{b}}\n{value|{d}%( {c})}'
return text + '\n' + param.data.value + '(' + param.percent + '%)'
} else {
return text.substring(0, 15) + '...' + '\n' + param.data.value + '(' + param.percent + '%)'
}
},
rich: { value: { fontSize: 12, color: '#999999', 'max-width': '100px' } },
},
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具