饼图的问题 #5703

一共两个问题

第一个问题是 如何在中间显示文字信息 像这样的一样

第二个问题 为什么加X轴的标题不显示呢？

附上代码

var chart = new G2.Chart({
  container: "g2-zong-interval-cate",
  autoFit: true,
  paddingTop: 30,
});
chart.coordinate({ type: "theta", innerRadius: 0.4, outerRadius: 0.9 });
chart.title({
  size: -28,
  title: "总利润",
  titleFontSize: 16,
  titleFontWeight: "normal",
  titleFill: "#000000",
});
chart
  .interval()
  .data(this.zhuData.TotalProfit)
  .transform({ type: "stackY" })
  .encode("y", "value_text")
  .encode("color", "name")
  .label({
    text: (d) => d.value.toFixed(2),
    fontWeight: "bold",
    offset: 14,
    transform: [
      {
        type: "overlapDodgeY",
      },
    ],
  })
  .label({
    text: "name",
    position: "spider",
    connectorDistance: 0,
    fontWeight: "normal",
    fill: "#333333",
    fontSize: 14,
    fillOpacity: 1,
    textBaseline: "bottom",
    transform: [
      {
        type: "overlapDodgeY",
      },
    ],
  })
  .axis({
    x: {
      title: "利润率",
      labelFontSize: 30,
      titlePosition: "right",
    },
  })
  .tooltip({
    title: "总利润",
    items: [
      (d) => ({
        name: d.name,
        value: d.value.toFixed(2),
      }),
    ],
  })
  .style("radius", 4)
  .style("stroke", "#fff")
  .style("lineWidth", 2)
  .animate("enter", { type: "waveIn" })
  .legend({
    color: {
      itemMarker: "circle",
      itemLabelFontSize: 14,
      itemLabelFill: "#000000",
      layout: {
        justifyContent: "center",
      },
    },
  })
  .scale("color", {
    range: ["#00c250", "#00c6c6", "#7299ff"],
  });

chart.render();