自定义饼图悬浮框文字 代码位置：legend下的每一项的formatter

环形图偏移 文字居中 代码位置：graphic

  const data = [
    {
      value: 100,
      name: "张三",
      title: "1111",
      datas: [{ aud: "333" }, { audR: "333" }, { com: "123123" }],
    },
    {
      value: 20,
      name: "李四",
      title: "1111",
      datas: [{ aud: "444" }, { audR: "333" }, { com: "123123" }],
    },
    {
      value: 30,
      name: "王五",
      title: "1111",
      datas: [{ aud: "333" }, { audR: "333" }, { com: "123123" }],
    },
    {
      value: 40,
      name: "赵六",
      title: "1111",
      datas: [{ aud: "333" }, { audR: "333" }, { com: "123123" }],
    },
    {
      value: 50,
      name: "老王",
      title: "1111",
      datas: [{ aud: "333" }, { audR: "333" }, { com: "123123" }],
    },
    {
      value: 60,
      name: "老王1",
      title: "1111",
      datas: [{ aud: "333" }, { audR: "333" }, { com: "123123" }],
    },
    {
      value: 70,
      name: "老王2",
      title: "1111",
      datas: [{ aud: "333" }, { audR: "333" }, { com: "123123" }],
    },
    {
      value: 80,
      name: "老王3",
      title: "1111",
      datas: [{ aud: "333" }, { audR: "333" }, { com: "123123" }],
    },
    {
      value: 200,
      name: "老王4",
      title: "1111",
      datas: [{ aud: "333" }, { audR: "333" }, { com: "123123" }],
    },
    {
      value: 100,
      name: "老王5",
      title: "1111",
      datas: [{ aud: "333" }, { audR: "333" }, { com: "123123" }],
    },
    {
      value: 110,
      name: "老王6",
      title: "1111",
      datas: [{ aud: "333" }, { audR: "333" }, { com: "123123" }],
    },
    {
      value: 120,
      name: "老王7",
      title: "1111",
      datas: [{ aud: "333" }, { audR: "333" }, { com: "123123" }],
    },
    {
      value: 130,
      name: "老王8",
      title: "1111",
      datas: [{ aud: "333" }, { audR: "333" }, { com: "123123" }],
    },
    {
      value: 140,
      name: "老王9",
      title: "1111",
      datas: [{ aud: "333" }, { audR: "333" }, { com: "123123" }],
    },
  ];
  chart2 = echarts.init(chart2Ref.value);
  // 配置数据
  const option = {
    title: {
      left: "10%",
      text: "",
      radius: ["40%", "60%"],
      center: ["25%", "50%"],
      subtext: "",
    },
    tooltip: {
      trigger: "item",
      formatter(data) {
        return `程序号：${data.name}</br>项目完成数: ${data.data.datas[2].com}</br>审核率: ${data.data.datas[0].aud}</br>审核成功率: ${data.data.datas[1].audR}`;
      },
    },

    legend: [
      {
        orient: "vertical",
        x: "65%",
        y: "center",
        bottom: "10",
        itemGap: 20, // 设置图例图形的宽
        data: ["张三", "李四", "王五", "赵六", "老王", "老王1", "老王2"],
        formatter(name) {
          let target, percentage;
          for (let i = 0; i < data.length; i++) {
            if (data[i].name === name) {
              target = data[i].value;
            }
          }
          const arr = [`${name} `, ` ${target}`];
          return arr.join(" ");
        },
      },
      {
        orient: "vertical",
        x: "80%",
        y: "center",
        bottom: "10",
        itemGap: 20, // 设置图例图形的高
        center: ["50%", "50%"],
        data: ["老王3", "老王4", "老王5", "老王6", "老王7", "老王8", "老王9"],
        formatter(name) {
          let target, percentage;
          for (let i = 0; i < data.length; i++) {
            if (data[i].name === name) {
              target = data[i].value;
            }
          }
          const arr = [`${name} `, ` ${target}`];
          return arr.join(" ");
        },
      },
    ],
    series: [
      {
        name: "访问来源",
        type: "pie",
        radius: ["40%", "60%"],
        center: ["25%", "50%"],
        text: "省市公司",
        data,
        label: {
          normal: {
            position: "inner",
            show: false,
          },
        },
      },
    ],
    graphic: [
      {
        type: "group",
        left: "25%",
        top: "center",
        bounding: "raw",
        children: [
          {
            type: "text",
            style: {
              text: `合计`,
              fontSize: 18,
              textAlign: "center",
              textVerticalAlign: "bottom",
            },
          },
          {
            type: "text",
            style: {
              text: `${data.reduce((total, item) => total + item.value, 0)}`,
              textAlign: "center",
              textVerticalAlign: "top",
              fontSize: 30,
            },
          },
        ],
      },
    ],
  };
  // 传入数据
  chart2.setOption(option);