饼图支持 tooltip,现在 tooltip 不生效,vue 组件模式下。
- 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
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