ECharts显示百分比(小数转百分比)

2024-05-22 19:22| 来源: 网络整理| 查看: 265

后台数据传递给前端是小数格式，例如：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)+'%'; };

【本文地址】

公司简介

联系我们