F2
F2 copied to clipboard
饼图支持 tooltip,现在 tooltip 不生效,vue 组件模式下。
<script lang="tsx">
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>
);
}
};
</script>
<style>
.container1 {
width: 100%;
margin-top: 10px;
}
</style>
vue版本: 3+ f2 版本:5.8+
是不能这么写吗?
onClick有效果吗,或者先换成柱图试试,饼图好像没有适配tooltip