F2 icon indicating copy to clipboard operation
F2 copied to clipboard

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

Open LovePlayCode opened this issue 6 months ago • 2 comments

<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+

LovePlayCode avatar Jun 24 '25 07:06 LovePlayCode

是不能这么写吗?

LovePlayCode avatar Jun 24 '25 07:06 LovePlayCode

onClick有效果吗,或者先换成柱图试试,饼图好像没有适配tooltip

tangying1027 avatar Jun 24 '25 09:06 tangying1027