Skip to content

[Bug] vchart的散点图设置指定形状后,tooltip和图例中图标靠下问题,没有与字体对齐 #2263

@zzsssssss

Description

@zzsssssss

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

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions