饼状图详情

中间数字：

 const option = {
    title: {
      text: "设备",
      subtext: chartData && chartData.reduce((prev, cur) => {
         return prev + Number(cur.value);
      }, 0)+ "台",
      textStyle: {
         color: "#595959",
         fontSize: 16,
         fontWeight: 400,
         align: "center",
      },
      subtextStyle: {
         fontSize: 24,
         color: ["#262626"],
         fontWeight: 700,
      },
      x: "center",
      y: "42%",
   },
    color: ['#1890FF', '#3CD4EE', '#48E09C', '#FF77B0', '#FFB932'],
    tooltip: {
      trigger: 'item',
    },
    legend: {
      show: true,
      bottom: '0%',
      left: 'center',
      right: 'center',
      data: chartData,
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        backgroundColor : "transparent",
        rich: {
          bb: {
            width: 100
          }
        }
      },
      formatter: function (name) {
        const targetItem = chartData.find((item) => item.name === name);
        return  `{bb|${name} ${targetItem ? `${targetItem.value}台}` : ''}`;
      },
    },
    series: [
      {
        name: '设备概览',
        type: 'pie',
        radius: ['40%', '60%'],
        data: chartData,
        label: {
          formatter: '{b}: {d}%',
        },
      },
    ],
  };

不带提示信息

  const option = {
    title: {
      text: "工单总数",
      subtext: chartData && chartData.reduce((prev, cur) => {
         return prev + Number(cur.value);
      }, 0),
      textStyle: {
         color: "#595959",
         fontSize: 16,
         fontWeight: 400,
         align: "center",
      },
      subtextStyle: {
         fontSize: 24,
         color: ["#262626"],
         fontWeight: 700,
      },
      x: "center",
      y: "40%",
   },
    color: ['#48E09C', '#1890FF', '#596775'],
    tooltip: {
      trigger: 'item',
    },
    legend: {
      show: true,
      data: chartData.map(i => i.name),
      orient: 'horizontal',
      bottom: '10px',
      itemWidth: 10,
      itemHeight: 10,
      formatter: function (name) {
        const targetItem = chartData.find((item) => item.name === name);
        const sum = chartData.reduce((accumulator, currentItem) => {
          return accumulator + currentItem.value;
        }, 0);
        return `${name} ${
          targetItem.value ? `${(Number((targetItem.value / sum) * 100)).toFixed(2)}%` : "0%"
        }  `;
      },
    },
    
    series: [
      {
        name: '七天分布图',
        type: 'pie',
        radius: ['40%', '60%'],
        data: chartData,
       
        labelLine:{
          normal:{
            show:false
          }
        },
      },
      
    ],
  };