[英]echarts format tooltip round decimal numbers
I'm using echarts to graph float values and I want to round the decimal numbers to 2 decimal places in the tooltip from the series (keeping the current tooltip style).我正在使用 echarts 绘制浮点值,并且我想将系列工具提示中的小数点四舍五入到小数点后 2 位(保持当前的工具提示样式)。
My option var is:我的选项 var 是:
var truckTurnAroundTimeOption = {
color: ['dodgerblue', '#e67e22'],
title: {
text: 'Truck Turnaround Time',
show: false,
textStyle: {
fontFamily: 'Roboto',
fontSize: 14
}
},
tooltip: {
trigger: 'axis'
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLabel: {
formatter: function (value, index) {
return value.slice(0,5);
}
},
data: truckTurnaroundTimes.map(item => item.hour)
}
],
yAxis: [
{
type: 'value',
name: 'mins',
nameLocation: 'middle',
nameGap: 30,
splitLine: {
//remove grid lines
show: false
}
}
],
grid: {
left: 68,
top: 8,
right: 28,
bottom: 38
},
legend: {
show: true,
icon: 'circle',
orient: 'vertical',
top: -4,
right: 26,
itemHeight: 12,
textStyle: {
fontSize: 11,
}
},
series: [
{
name: 'current',
type: 'line',
smooth: false,
data: data.map(item => parseFloat(item.current_truck_turnaround_time)) /* Values like 12.2343443, 5.123452 */
},
{
name: 'improved',
type: 'line',
smooth: false,
data: data.map(item => parseFloat(item.improved_truck_turnaround_time)) /* Values like 12.2343443, 5.123452 */
}
]
};
The data in the array datasets contain values like: 12.2343443, 5.123452, etc.数组数据集中的数据包含以下值:12.2343443、5.123452 等。
PD: I don't want to round the series data before graphing PD:我不想在绘图之前对系列数据进行四舍五入
Use the toFixed()
-method of parseFloat()
here:在此处使用
parseFloat()
的toFixed()
方法:
data.map(item => parseFloat(item.current_truck_turnaround_time).toFixed(2))
You can provide a formatter function to format the display to the required precision.您可以提供格式化程序 function 以将显示格式化为所需的精度。
{
tooltip: {
formatter([{value: v1}, {value: v2}]) => `${v1.toFixed(2)}<br/>${v2.toFixed(2)}`,
trigger: 'axis'
}
}
You just need to add the valueFormatter to your tooltip object like so:您只需要将 valueFormatter 添加到您的工具提示 object 中,如下所示:
{
tooltip: {
trigger: 'axis',
valueFormatter: (value) => value,
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.