JS，EChart堆叠图Label格式化的问题

cqwcns 发表于 2023-2-18 14:07

在EChart中，对于label的格式，一般来说可以使用官方formatter方法非常方便实现自定义，例如小数的四舍五入。
数据中有些值是多位小数的，考虑都一些精确度的原因（用于排序），我不希望在源数据中进行，所以选择formatter方法格式化。

但在数据集+堆叠图的情况下，我遇到了一些问题。formatter的params传过来的是一个系列的数组，而非单个值。
研究了半天，也没有实现label的四舍五入渲染。
请各位大佬指教，感谢。

代码：

// 数据
const arrDateset = [
["部门", "参评率", "满意率", "重复率", "投诉率"],
["广东省", 120.7876, 160.6587, 20.8787, 20.7867, 40.64545],
["台湾省", 80, 20, 0, 0, 100],
["北京市", 60, 40, 40, 40, 180],
["上海市", 20.4678, 80, 60.78754, 80, 240],
["四川省", 40, 60.78455, 80, 100.9787858, 280],
["福建省", 100, 100, 100, 60.47878, 360]
];

// 创建系列
const objSeries = {
type: 'bar', stack: 'total', label: {
   show: true
},
emphasis: {
   focus: 'series'
}
},
arrSeries = [];
for (let i = 0; i < arrDateset.length - 1; i++) {
arrSeries.push(objSeries);
}

// 创建配置
option = {
legend: {
   show: true
},
label: {
   show: true,
   formatter: (params) => {
         // if (params.data) return params.data.toFixed(2);
   }
},
tooltip: {
   trigger: 'axis',
   axisPointer: {
         type: 'cross',
         label: {}
   }
},
dataset: {
   source: arrDateset
},
xAxis: {},
yAxis: { type: 'category' },
series: arrSeries
};

DEMO链接：
https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack&code=PTAEgdTQ7YwWAKAYwPYDsDOAXUBDATjgIlugKarGYC8oA2nKPTQESAXCYBepjANKI4EPKgI9GBw507dAh3aB4QyFdGgWcTAsJqTugVKNAk9FCAuhzoNqjQP56gHDlAgO7CAjACYADADoA7AA4bANi4nH1xwFYHXS1YffQX3tHGy4AFncwjyiNLXodQAflQD87Yy47Cx8M0CyskwsLWNgGJkB0ZUAauUAgPWE3cKyI2pd0wuKdQCg5QHdbKsyrMJC7NKy3WwdogZ8I5u1GQG21QF3dVNB60CH7KI8x0DzrAE57ey8fJs0iqcB4z0AvvQWtl3ybweswvf7QAGY3NTg1AG44OBBQQDYSudAN8-gHQlOBINCYRAAIwAVgBlYg4ACWpFAVAA3nFQOgAJ4AB2IAC5QAByGG4MlcDBYeAAa1JZPQiHQWAANtTQOysDDiOzSdiTsV6KgABaIADupPQOAArsQcQBfY7FYgAWwJYqwqBRqEFOOKADNEPA5fryWRUaQycq4CqcbgcEjragMTRvnATThQAAKdnkUAo90WL5B0AAHmweEIJDI6GoBSsAeQAHN0GLQABaTZhlEAanzAEpQELik6XWjUFYCeaxb7YYjkVWiz9YErfrB_kDALKJgDt_OCIAnoFEod1lhgB1PEZAAEwNwpF4qlMvlisXDsXPL5AtLhoYy-luLXqpF9G96qIJBwpN9BNwWHVqBLFAAfHvF2f6P8UUa_fecEfatZyILASxwcg5RwZBQAAoCrBAtkrBZAAxFEAA9iFnX0zFbfd6A7DdT3oFlEHZEcCQXL9jxRVNpxvcksHQvVqXw7BmNQAAFRAUWQa8qOohh8SJJl4BwRBUFQVjPy_bd-UFQjqMUhhN2KRCdXIASz1QRAoPgElowIIhSHIZViNAdCAEEOIU8y8WsvVBVxQkDLJeBjNTRAcDxMlQFUg9m1IUkK0C1B7S-IA

cqwcns 发表于 2023-2-18 14:09

直接点击DEMO链接，可跳转到官方示例页面。或者复制我的代码到官方示例页面，可以复现。

谢谢各位

jiujiukeji 发表于 2023-2-18 15:28

哥们四舍五入得你自己去四舍五入这个图标是你传什么显示什么~

joted 发表于 2023-2-18 15:29

   formatter: (params) => {
         if (params.data) return params.data.toFixed(2);
   }

charlieji 发表于 2023-2-18 15:33

formatter: (params) => {
if (params.value) return params.value.toFixed(2)
}

页: [1]

吾爱破解 - 52pojie.cn's Archiver

JS，EChart堆叠图Label格式化的问题