ECharts显示百分比(小数转百分比)
后台数据传递给前端是小数格式,例如:0.2248
前端显示要求为:22.48%
方法,设置tooltip.formatter和yAxis.axisLabel.formatter,两个分别是提示语格式化和Y轴标签格式化。
示例:
//初始化echart var myChart = echarts.init(document.getElementById('chartArea')); //初始配置 var option = { title: { text: '' }, tooltip: { formatter:null }, legend: { data:['新增用户数'] }, grid: { left: '3%', right: '4%', bottom: '4%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { axisLabel:{ interval:0, rotate:0 }, boundaryGap: false, data: [] }, yAxis: { axisLabel:{ formatter:null } }, series: [] }; //查询数据后,更新配置 option.xAxis.data = chartData.xAxisData; option.legend.data = chartData.legends[0]; option.series = chartData.series[0]; var dataFormat = chartData.dataFormats[0]; if(dataFormat == 'normal'){ option.yAxis.axisLabel.formatter = null; option.tooltip.formatter = null; }else if(dataFormat == 'percentage'){ option.yAxis.axisLabel.formatter = function(value,index){ return (value*100).toFixed(2)+'%'; }; option.tooltip.formatter = function (params) { return (params.value*100).toFixed(2)+'%'; }; } myChart.setOption(option,true);
另外,如果图上显示了数值,则也需要格式化。格式化方法如下:
//4.x版本 option.series.label.formatter = function (params) { return (params.value*100).toFixed(2)+'%'; }; //3.x版本 option.series.label.normal.formatter = function (params) { return (params.value*100).toFixed(2)+'%'; }; //2.x版本 option.series.itemStyle.normal.label.formatter = function (params) { return (params.value*100).toFixed(2)+'%'; };
分类:
javascript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库