antvis / antvis/F2

饼图支持 tooltip,现在 tooltip 不生效,vue 组件模式下。

Open
#2,073 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
8k
Forks
637
PR merge metrics
No merged PRs in 30d

Description

```

import Canvas from "@antv/f-vue";
import {
Chart,
Interval,
Legend,
PieLabel,
Tooltip,
TooltipView
} from "@antv/f2";

const data = [
{
amount: 1,
ratio: 0.1,
memo: "学习",
const: "const"
},
{
amount: 1,
ratio: 0.5,
memo: "睡觉",
const: "const"
}
];
export default {
name: "App",
props: ["chartData"],
data() {
return {
year: "2021"
};
},

render() {
const { chartData } = this;
console.log("chartData==", chartData);
return (
<div class="container1">
<Canvas height={300} pixelRatio={window.devicePixelRatio}>
<Chart
data={chartData}
coord={{
type: "polar",
transposed: true,
innerRadius: 0,
radius: 0.8
}}
scale={{}}
>
<Interval
x="const"
y="ratio"
adjust="stack"
color={{
field: "memo",
range: [
"#1890FF",
"#13C2C2",
"#2FC25B",
"#FACC14",
"#F04864",
"#8543E0",
"#3436C7",
"#223273"
]
}}
/>

<PieLabel
label1={data => {
return {
text: data.memo,
fill: "#808080"
};
}}
label2={data => {
return {
fill: "#000000",
text: "$" + data.amount.toFixed(2),
fontWeight: 500,
fontSize: 12
};
}}
onClick={data => {
console.log(data);
}}
/>
<Legend position="bottom" />
<Tooltip />
</Chart>
</Canvas>
</div>
);
}
};

.container1 {
width: 100%;
margin-top: 10px;
}

```
vue版本: 3+
f2 版本:5.8+

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the supplied Vue 3+ example with F2 5.8+ and the component in the pie chart. Trace the Vue component integration from the example and verify that tooltip interaction works in the same setup while preserving the existing pie chart behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.