记录antv g2 apple 活动图配置

vue3 主要看label 那段

  // 初始化图表实例
  const chart = new Chart({
    container: "container" + props.index,
    width: getWidth.value,
    height: 250
  });
  // 根据屏幕大小来控制图的宽度
  const chartSize = getWidth.value >= 300 ? 125 : getWidth.value >= 150 ? 80 : 40; 
  // 声明可视化
  chart.data(props.List).coordinate({ type: "radial", innerRadius: 0.5 });

  chart
    .interval()
    .encode("x", "name")
    .encode("y", 1)
    .encode("size", chartSize)
    .encode("color", "#fff")
    .scale("color", { type: "identity" })
    .style("fillOpacity", 0.25)
    .tooltip(false)
    .animate("enter", { type: "waveIn", duration: 1000 });

  chart
    .interval()
    .encode("x", "name")
    .encode("y", "percent")
    .encode("color", "color")
    .encode("size", chartSize)
    .style("radius", 0)
    .axis(false)
    .animate("enter", {
      type: "waveIn",
      easing: "easing-out-bounce",
      duration: 1000
    })
    .tooltip(false)
    .label({
    //   text: (data)=>{return data.percent == 1?'':data.text}, // 百分百后不显示可控制
      text: "text",
      position: "outside",
      autoRotate: true,
      fontSize: 12,
      rotateToAlignArc: true,
      dx: (data)=>{return data.percent > 0.7?15:-15}, // 文字和图之间的间距
      textAlign: "center",
      textBaseline: "middle",
      style: {
        transform: (data)=>{return data.percent > 0.7?'':'rotate(180deg)'}  // 翻转它，不得歪脖子病
      },
      transform: [{ type: "overlapDodgeY" }]
    });

  // 渲染可视化
  nextTick(() => {
    chart.render();
  });