[Bug] circlePacking图,在某些情况下,label文字会变得模糊
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.8k
- Forks
- 221
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 26
Description
Version
2.0.10
Link to Minimal Reproduction
无
Steps to Reproduce
浏览器信息:
一
一
以下是部分图表配置代码:
// 配置项
const spec = {
type: 'circlePacking', // 图表类型
padding: 0,
categoryField: 'name', // 分类绑定值
valueField: 'value', // 数值绑定值
layoutPadding: 5, // 层内边距
drill: true, // 下钻功能开关
// 图表数据
data: [
{
id: 'data',
values: props.data,
}
],
// 标签图元配置
label: {
// overlap: true, // 开启防重叠,默认值
// 图元样式配置
style: {
fontSize: 11,
visible: (dd) => !dd.isMain,
shadowBlur: 0,
strokeOpacity: 0,
}
},
// 打包气泡图元配置
circlePacking: {
// 图元样式配置
style: {
// 填充颜色
fill: (dd) => {
// 如果是主节点
if (dd.isMain) {
// 通过学科分类获取对应背景颜色值
return deal_getBgColor(dd.lei);
}
// 如果是子节点 并且 开启硕博点标识
else if (tf_suoBo) {
// 子学科包含博士学位
if (dd.isDoctor) { return deal_getFillColor(dd.lei); }
// 子学科包含硕士学位
else if (dd.isMaster) { return '#ffffff'; }
// 没有的话使用白色
return '#ffffff';
}
// 默认情况下,使用统一学科分类对应色
return deal_getFillColor(dd.lei);
},
// 圆弧描边
stroke: (dd) => {
// 如果是主节点
if (dd.isMain) {
// 通过学科分类获取对应边框颜色值
return deal_getBorderColor(dd.lei);
}
// 如果是子节点 并且 开启硕博点标识
else if (tf_suoBo) {
// 子学科包含硕博学位
if (dd.isMaster || dd.isDoctor) {
// 通过学科分类获取对应边框颜色值
return deal_getBorderColor(dd.lei);
}
}
},
// 线宽
lineWidth: 2,
}
},
// 文字提示框配置
tooltip: {
mark: {
title: {
value: (val) => {
// 将name中的“-”去掉,再用“/”将所有name拼接起来
return val?.datum?.map((data) => data.name.replace(/-/g, "")).join(' / ');
}
},
},
},
};
Current Behavior
台式机电脑配置:
一
一
各种不一样都找完了,最后只能说硬件有点不一样,
屏幕是1K屏幕,用的VGA线,没有做任何缩放配置,
他们的就会这样,文字显示不清晰:
Expected Behavior
我自己上了一块独显,另一个同事也是独显,我们用的HDMI,我们的电脑就没有问题:
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the circlePacking configuration from the issue and compare label rendering on the reported VGA and HDMI setups. The issue provides no browser, operating system, framework, file, or test; done means identifying and correcting the conditions that make labels blurry without degrading rendering on the working setup.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100