VisActor / VChart

VChart, more than just a cross-platform charting library, but also an expressive data storyteller.
https://www.visactor.io/vchart
MIT License
1.01k stars 73 forks source link

[Bug] 通过symbolType指定svg图片为指定绘制形状时,提示信息的图形报错 #3384

Closed zzsssssss closed 2 weeks ago

zzsssssss commented 3 weeks ago

Version

1.12.7

Link to Minimal Reproduction

https://applink.feishu.cn/client/message/link/open?token=AmU%2FQqHXB0ADZySA8LFEwAE%3D

Steps to Reproduce

const spec = { type: "common", data: [ { id: "data", values: [ { col_47: "2020", col_49: 6710, }, { col_47: "2021", col_49: 8012, }, { col_47: "2022", col_49: 9901, }, { col_47: "2023", col_49: 12911, }, ], fields: { col_47: { type: "linear", sortIndex: 1, }, }, }, ], legends: [], color: ["#1763FF"], label: { visible: false, position: "outside", style: { fontSize: 14, fontFamily: "微软雅黑", fontWeight: "400", fill: "#909090", fillOpacity: 1, stroke: "", lineWidth: 0, lineDash: [0, 0], opacity: 1, strokeOpacity: 1, cursor: "default", textAlign: "right", textBaseline: "middle", }, }, title: { visible: false, orient: "top", }, 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, }, }, fieldId: "TJ7510091ab7fe4c86a466ac353b863e", 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, }, ], markArea: [], series: [ { point: { style: { size: 30, stroke: "#ffffff", lineWidth: 0, fillOpacity: 0.8, symbolType: '', cursor: "pointer", fill: "#1763FF", }, state: { selected_reverse: { fill: "#ddd", fillOpacity: 0.2, }, }, }, label: { visible: false, position: "outside", style: { fontWeight: "400", fillOpacity: 1, stroke: "", lineWidth: 0, lineDash: [0, 0], opacity: 1, strokeOpacity: 1, cursor: "default", textAlign: "right", textBaseline: "middle", }, }, type: "scatter", barMaxWidth: 30, barMinWidth: 1, dataIndex: 0, xField: "col_47", yField: ["col_49"], direction: "vertical", id: "col_49", stack: true, bar: { state: { selected_reverse: { fill: "#ddd", fillOpacity: 0.2, }, }, style: { cursor: "pointer", fill: "#1763FF", }, }, seriesStyle: [], animation: false, animationThreshold: 2000, }, ], scales: [ { id: "col_49", type: "ordinal", range: ["#1763FF"], }, ], markLine: [], region: [{}], }; const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync(); // Just for the convenience of console debugging, DO NOT COPY! window["vchart"] = vchart; 1.复制配置到官网 2.鼠标移入svg图标上

Current Behavior

提示信息图形

提示信息的图标不显示,报错

Expected Behavior

图片正常显示,不报错。

Environment

- OS:window
- Browser: chrome
- Framework: vue@3

Any additional comments?

No response