echarts 封装饼图销量

<div id="app" style="width: 80%; height: 400px;border:1px solid red"></div>
<script>
  var mychart = echarts.init(document.getElementById("app"));
  const mockData = [
    {
      legendname: "粉面粥店",
      value: 66,
      percent: "15.40%",
      name: "粉面粥店 | 15.40%",
      itemStyle: { color: "#000" },
    },
    {
      legendname: "简餐便当",
      value: 76,
      percent: "22.40%",
      name: "简餐便当 | 22.40%",

      itemStyle: { color: "#8d7fec" },
    },
    {
      legendname: "汉堡披萨",
      value: 26,
      percent: "22.40%",
      name: "汉堡披萨 | 15.40%",

      itemStyle: { color: "#5085f2" },
    },
  ];
  var option = {
    title: [
      {
        text: "品类分布",
        subtext: "品类分布副标题",
        left:100,
        top:50,
        textStyle: { color: "red" },
        subtextStyle: { color: "red" },
      },
      {
        text: "累计订单量",
        subtext: "320",
        x: "34.5%",
        y: "45.5%",
        textAlign: "center",
      },
    ],
    legend: {
      type: "scroll",
      orient: "vertical",
      left: "70%",
      top: "middle",
      height: 250,
      textStyle: { color: "#8c8c8c" },
    },
    tooltip: {
      trigger: "item",
      formatter: function (params) {
        console.log(params);
        return (
          params.seriesName +
          "<br/>" +
          params.marker +
          params.data.legendname +
          "<br/>" +
          "数量" +
          params.data.value +
          "<br/>" +
          "占比:" +
          params.data.percent
        );
        console.log(params, "params");
      },
    },
    series: [
      {
        name: "品类分布",
        itemStyle: { borderWidth: 4, borderColor: "#fff" },
        type: "pie",
        data: mockData,
        radius: ["25%", "30%"],
        center: ["35%", "50%"],
        clockwise: true,
        labelLine: { show: true, length: 8, length2: 10, smooth: true },
        // label: {
        //   position: "outside",//inside饼图扇区内部展示文字
        // },
      },
    ],
  };
  mychart.setOption(option);
</script>