feat(图表): 桑基图提示信息支持配置总出占比显示 #16476 #16535
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
fit2cloudrd
reviewed
Jul 21, 2025
| name: source + ' -> ' + target, | ||
| value: valueFormatter(value, t.tooltipFormatter) + ` (${ratio}%)` | ||
| } | ||
| } | ||
| return { | ||
| name: source + ' -> ' + target, | ||
| value: valueFormatter(value, t.tooltipFormatter) |
There was a problem hiding this comment.
在检查代码差异时，存在以下问题：
- 变量作用域混淆：
t.tooltipFormatter.showTotalPercent和datum.out的顺序可能有误。 - 格式化字符串的问题：
toDecimalPlace未定义。应该使用更标准的方法。 - 数据结构和类型检查：需要更好地处理和验证输入数据（如
options.data）。
改进措施：
- 确保所有引用的属性或函数都已正确定义。
- 使用更现代的标准方法来格式化数字字符串，例如
Intl.NumberFormat. - 验证和修复相关依赖项的版本，并确保它们与当前项目兼容。
以下是改进建议：
// 定义数值四舍五入函数
function toFixed(num: number, digits: number): string {
const factor = Math.pow(10, digits);
return (Math.round(num * factor) / factor).toString();
}
export class SankeyBar extends G2PlotChartView<SankeyOptions, Sankey> {
public static readonly type = 'sankey-bar';
// 其他代码...
if ( customAttr.tooltip ) {
let t = JSON.parse(JSON.stringify(customAttr.tooltip));
if(t && t.show){
// 计算每个source节点的总出
let outTotal:{[index:string]:number}={};
Array.isArray(options.data)&&options.data.forEach(d=>{
outTotal[d.source]=(outTotal[d.source]|0)+d.value;
});
tooltip={
showTitle:false,
showMarkers:true,
...others...,
formatter:(datum:Datum):{}=>{
const {source,target,value}=datum;
// 总出占比
let outData=outTotal[source];
if(outData&&t.tooltipFormatter['showTotalPercent']){
let ratio=toFixed(value/outData,t.tooltipFormatter['decimalCount']||2);
return {
name:`${source}->${target}`,
value:valueFormatter(value,t.tooltipFormatter)+' ('+ratio+'%)'
};
}
return {...datum,...otherValues};
},
};
}
else{
console.log('Tooltip is not shown.');
}
}
}请注意上述代码示例中的逻辑变化以及对 toFixed 函数的支持（通过一个简单的封装）。这些改动有助于改善代码的质量和可维护性。
fit2cloudrd
reviewed
Jul 21, 2025
| @change="changeTooltipAttr('tooltipFormatter.showTotalPercent')" | ||
| :label="t('chart.value_formatter_total_out_percent')" | ||
| /> | ||
| </el-form-item> | ||
| </template> | ||
| <div v-if="showSeriesTooltipFormatter"> | ||
| <el-form-item> |
There was a problem hiding this comment.
这段代码中有一个变量名可能引起歧义或混淆：
chart 的值可能是任何类型的对象，包括数组或其他复杂类型。在计算属性 showTotalPercent 中使用这个变量可能导致意外的结果。
建议为 chart 变量添加一个前缀以提高可读性，并确保它的值类型是期望的对象，而不是其他类型。例如，可以将它重命名为 chartInstance 或类似的命名方式来明确其表示的意义。
fit2cloudrd
reviewed
Jul 21, 2025
| /** | ||
| * 显示总出占比 | ||
| */ | ||
| showTotalPercent: boolean | ||
| } | ||
|
|
||
| /** |
There was a problem hiding this comment.
该代码的变化没有明显的不规范或潜在问题。优化建议是保持代码清晰和一致，并在必要时添加更多的注释以提高可读性。具体来说：
thousandSeparator对应的是千位分隔符号。showTotalPercent则是用来显示总出占比的标志。
以下是修改后的代码示例：
declare interface BaseFormatter {
/** 是否显示千位分隔符 */
thousandSeparator: boolean
/** 是否显示总出占比 */
showTotalPercent: boolean
}这样可以使得代码更易于理解和维护。
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What this PR does / why we need it?
Summary of your change
Please indicate you've done the following: