VisActor / VisActor/VChart

[Bug] circlePacking图,在某些情况下,label文字会变得模糊

Open
#4,376 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

浏览器信息:

Image



以下是部分图表配置代码:

// 配置项
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

台式机电脑配置:

Image



各种不一样都找完了,最后只能说硬件有点不一样,
屏幕是1K屏幕,用的VGA线,没有做任何缩放配置,
他们的就会这样,文字显示不清晰:
Image

Expected Behavior

我自己上了一块独显,另一个同事也是独显,我们用的HDMI,我们的电脑就没有问题:
Image

Environment
- OS:
- Browser:
- Framework:
Any additional comments?

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.