[Bug] vchart的散点图设置指定形状后,tooltip和图例中图标靠下问题,没有与字体对齐
@neuqzxy is already working on this.
Since Feb 23, 2024.
- Dominant language
- TypeScript
- Stars
- 1.8k
- Forks
- 221
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 26
Description
Version
1.9.2
Link to Minimal Reproduction
1111
Steps to Reproduce
添加如下配置项
const spec = {
type: "scatter",
data: [
{
id: "data",
values: [
{
d8c2a5a2698dd0d40d6ab72ef7c519: "办公用品",
cf240c288b18e974540w9aea68ebfe: 6514,
f210f3ec67a792f4302ka34034fbb5: "公司",
},
{
d8c2a5a2698dd0d40d6ab72ef7c519: "办公用品",
cf240c288b18e974540w9aea68ebfe: 11063,
f210f3ec67a792f4302ka34034fbb5: "消费者",
},
{
d8c2a5a2698dd0d40d6ab72ef7c519: "技术",
cf240c288b18e974540w9aea68ebfe: 3774,
f210f3ec67a792f4302ka34034fbb5: "消费者",
},
{
d8c2a5a2698dd0d40d6ab72ef7c519: "家具",
cf240c288b18e974540w9aea68ebfe: 4336,
f210f3ec67a792f4302ka34034fbb5: "消费者",
},
{
d8c2a5a2698dd0d40d6ab72ef7c519: "技术",
cf240c288b18e974540w9aea68ebfe: 1365,
f210f3ec67a792f4302ka34034fbb5: "小型企业",
},
{
d8c2a5a2698dd0d40d6ab72ef7c519: "家具",
cf240c288b18e974540w9aea68ebfe: 2564,
f210f3ec67a792f4302ka34034fbb5: "公司",
},
{
d8c2a5a2698dd0d40d6ab72ef7c519: "技术",
cf240c288b18e974540w9aea68ebfe: 2503,
f210f3ec67a792f4302ka34034fbb5: "公司",
},
{
d8c2a5a2698dd0d40d6ab72ef7c519: "办公用品",
cf240c288b18e974540w9aea68ebfe: 3824,
f210f3ec67a792f4302ka34034fbb5: "小型企业",
},
{
d8c2a5a2698dd0d40d6ab72ef7c519: "家具",
cf240c288b18e974540w9aea68ebfe: 1591,
f210f3ec67a792f4302ka34034fbb5: "小型企业",
},
],
fields: {
f210f3ec67a792f4302ka34034fbb5: {
type: "ordinal",
sortIndex: 1,
},
},
},
],
legends: [{ visible: true, position: "middle", orient: "bottom" }],
tooltip: {
visible: true,
mark: {
content: [
{
key: "细分",
value: (datum) => datum["f210f3ec67a792f4302ka34034fbb5"],
},
{
key: "类别",
value: (datum) => datum["d8c2a5a2698dd0d40d6ab72ef7c519"],
},
{
key: "数量",
value: (datum) => datum["cf240c288b18e974540w9aea68ebfe"],
},
],
},
dimension: {
content: [
{
key: "细分",
value: (datum) => datum["f210f3ec67a792f4302ka34034fbb5"],
},
{
key: "类别",
value: (datum) => datum["d8c2a5a2698dd0d40d6ab72ef7c519"],
},
{
key: "数量",
value: (datum) => datum["cf240c288b18e974540w9aea68ebfe"],
},
],
},
renderMode: "canvas",
confine: true,
throttleInterval: 10,
},
color: {
type: "ordinal",
domain: ["办公用品", "技术", "家具"],
range: ["#72ccff", "#76f2f2", "#d2f5a6"],
},
seriesField: "d8c2a5a2698dd0d40d6ab72ef7c519",
axes: [
{
domainLine: {
visible: false,
style: {
lineWidth: 1,
stroke: "#d9dde4",
strokeOpacity: 1,
},
},
grid: {
visible: true,
style: {
lineWidth: 1,
stroke: "#f1f2f5",
strokeOpacity: 1,
lineDash: [],
},
},
subGrid: {
visible: false,
style: {
lineWidth: 1,
stroke: "#f1f2f5",
strokeOpacity: 1,
lineDash: [4, 4],
},
},
tick: {
visible: false,
inside: false,
tickSize: 4,
alignWithLabel: true,
style: {
lineWidth: 1,
stroke: "#d9dde4",
strokeOpacity: 1,
},
},
subTick: {
visible: false,
tickSize: 2,
style: {
lineWidth: 1,
stroke: "#d9dde4",
strokeOpacity: 1,
},
},
label: {
visible: true,
inside: false,
space: 12,
style: {
fontSize: 12,
fill: "#89909d",
fontWeight: "normal",
fillOpacity: 1,
},
autoLimit: true,
},
title: {
space: 12,
padding: 0,
style: {
fontSize: 12,
lineHeight: "130%",
fill: "#606773",
fontWeight: "normal",
fillOpacity: 1,
},
autoRotate: true,
},
maxWidth: "30%",
unit: {
visible: false,
style: {
fontSize: 12,
fill: "#89909d",
fontWeight: "normal",
fillOpacity: 1,
},
},
type: "linear",
visible: true,
orient: "left",
},
{
domainLine: {
visible: true,
style: {
lineWidth: 1,
stroke: "#d9dde4",
strokeOpacity: 1,
},
},
grid: {
visible: false,
style: {
lineWidth: 1,
stroke: "#f1f2f5",
strokeOpacity: 1,
lineDash: [],
},
},
subGrid: {
visible: false,
style: {
lineWidth: 1,
stroke: "#f1f2f5",
strokeOpacity: 1,
lineDash: [4, 4],
},
},
tick: {
visible: true,
inside: false,
tickSize: 4,
alignWithLabel: true,
style: {
lineWidth: 1,
stroke: "#d9dde4",
strokeOpacity: 1,
},
},
subTick: {
visible: false,
tickSize: 2,
style: {
lineWidth: 1,
stroke: "#d9dde4",
strokeOpacity: 1,
},
},
label: {
visible: true,
inside: false,
space: 8,
style: {
fontSize: 12,
fill: "#89909d",
fontWeight: "normal",
fillOpacity: 1,
},
autoRotate: true,
autoRotateAngle: [0, 90],
autoHide: true,
autoLimit: true,
},
title: {
space: 8,
padding: 0,
style: {
fontSize: 12,
lineHeight: "130%",
fill: "#606773",
fontWeight: "normal",
fillOpacity: 1,
},
},
maxHeight: "30%",
unit: {
visible: false,
style: {
fontSize: 12,
fill: "#89909d",
fontWeight: "normal",
fillOpacity: 1,
},
},
type: "band",
visible: true,
orient: "bottom",
sampling: false,
},
],
direction: "vertical",
barMaxWidth: 30,
xField: "f210f3ec67a792f4302ka34034fbb5",
yField: "cf240c288b18e974540w9aea68ebfe",
barMinWidth: 1,
stack: true,
shape:
"M688.872727 628.363636H307.2c-38.787879 0-77.575758-15.515152-105.50303-41.890909-31.030303-29.478788-48.09697-69.818182-48.09697-113.260606 0-68.266667 44.993939-128.775758 110.157576-147.393939 31.030303-94.642424 119.466667-159.806061 220.315151-159.806061 77.575758 0 147.393939 37.236364 190.836364 99.29697 6.206061 0 10.860606-1.551515 15.515151-1.551515 100.848485 0 181.527273 82.230303 181.527273 181.527272 0 72.921212-43.442424 138.084848-110.157576 167.563637-23.272727 9.309091-48.09697 15.515152-72.921212 15.515151zM305.648485 786.618182l-34.133333-20.169697 34.133333-20.169697c9.309091-4.654545 12.412121-17.066667 6.20606-26.375758-4.654545-9.309091-17.066667-12.412121-26.375757-6.20606l-34.133333 18.618182v-40.339394c0-10.860606-9.309091-18.618182-18.618182-18.618182s-18.618182 9.309091-18.618182 18.618182v40.339394L178.424242 713.69697c-9.309091-4.654545-20.169697-1.551515-26.375757 6.20606-4.654545 9.309091-1.551515 20.169697 6.20606 26.375758l35.684849 20.169697-35.684849 20.169697c-9.309091 4.654545-12.412121 17.066667-6.20606 26.375757 3.10303 6.206061 9.309091 9.309091 17.066667 9.309091 3.10303 0 6.206061-1.551515 9.30909-3.10303l35.684849-21.721212V837.818182c0 10.860606 9.309091 18.618182 18.618182 18.618182s18.618182-9.309091 18.618182-18.618182v-40.339394l34.133333 20.169697c3.10303 1.551515 6.206061 3.10303 9.309091 3.10303 6.206061 0 12.412121-3.10303 17.066666-9.309091 6.206061-7.757576 3.10303-18.618182-6.20606-24.824242zM491.830303 786.618182l-34.133333-20.169697 34.133333-20.169697c9.309091-4.654545 12.412121-17.066667 6.206061-26.375758-4.654545-9.309091-17.066667-12.412121-26.375758-6.20606l-34.133333 18.618182v-40.339394c0-10.860606-9.309091-18.618182-18.618182-18.618182s-18.618182 9.309091-18.618182 18.618182v40.339394L364.606061 713.69697c-9.309091-4.654545-20.169697-1.551515-26.375758 6.20606-4.654545 9.309091-1.551515 20.169697 6.206061 26.375758l35.684848 20.169697-35.684848 20.169697c-9.309091 4.654545-12.412121 17.066667-6.206061 26.375757 3.10303 6.206061 9.309091 9.309091 17.066667 9.309091 3.10303 0 6.206061-1.551515 9.309091-3.10303l35.684848-21.721212V837.818182c0 10.860606 9.309091 18.618182 18.618182 18.618182s18.618182-9.309091 18.618182-18.618182v-40.339394l34.133333 20.169697c3.10303 1.551515 6.206061 3.10303 9.309091 3.10303 6.206061 0 12.412121-3.10303 17.066667-9.309091 6.206061-7.757576 3.10303-18.618182-6.206061-24.824242zM678.012121 786.618182l-34.133333-20.169697 34.133333-20.169697c9.309091-4.654545 12.412121-17.066667 6.206061-26.375758-4.654545-9.309091-17.066667-12.412121-26.375758-6.20606l-34.133333 18.618182v-40.339394c0-10.860606-9.309091-18.618182-18.618182-18.618182s-18.618182 9.309091-18.618182 18.618182v40.339394L550.787879 713.69697c-9.309091-4.654545-20.169697-1.551515-26.375758 6.20606-4.654545 9.309091-1.551515 20.169697 6.206061 26.375758l35.684848 20.169697-35.684848 20.169697c-9.309091 4.654545-12.412121 17.066667-6.206061 26.375757 3.10303 6.206061 9.309091 9.309091 17.066667 9.309091 3.10303 0 6.206061-1.551515 9.309091-3.10303l35.684848-21.721212V837.818182c0 10.860606 9.309091 18.618182 18.618182 18.618182s18.618182-9.309091 18.618182-18.618182v-40.339394l34.133333 20.169697c3.10303 1.551515 6.206061 3.10303 9.309091 3.10303 6.206061 0 12.412121-3.10303 17.066667-9.309091 6.206061-7.757576 3.10303-18.618182-6.206061-24.824242zM864.193939 786.618182l-34.133333-20.169697 34.133333-20.169697c9.309091-4.654545 12.412121-17.066667 6.206061-26.375758-4.654545-9.309091-17.066667-12.412121-26.375758-6.20606l-34.133333 18.618182v-40.339394c0-10.860606-9.309091-18.618182-18.618182-18.618182s-18.618182 9.309091-18.618182 18.618182v40.339394L738.521212 713.69697c-9.309091-4.654545-20.169697-1.551515-26.375757 6.20606-4.654545 9.309091-1.551515 20.169697 6.20606 26.375758l35.684849 20.169697-35.684849 20.169697c-9.309091 4.654545-12.412121 17.066667-6.20606 26.375757 3.10303 6.206061 9.309091 9.309091 17.066666 9.309091 3.10303 0 6.206061-1.551515 9.309091-3.10303l35.684849-21.721212V837.818182c0 10.860606 9.309091 18.618182 18.618181 18.618182s18.618182-9.309091 18.618182-18.618182v-40.339394l34.133334 20.169697c3.10303 1.551515 6.206061 3.10303 9.30909 3.10303 6.206061 0 12.412121-3.10303 17.066667-9.309091 4.654545-7.757576 1.551515-18.618182-7.757576-24.824242z",
size: "19",
};
可看出图标与字体没有对齐
Current Behavior
[](u
图标与文字没有对齐
Expected Behavior
图标能与文字对齐
Environment
- OS:windows
- Browser:121.0.6167.185
- Framework:Vue@3
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.
Assessment
This issue has not been assessed yet.