echarts - 饼图a

264 阅读1分钟
  1. 图片示例

    image.png

  2. 配置项

options = {
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b} : {c} ({d}%)",
          formatter: "{d}%<br/>{b} : {c}人次 ",
        },
        title: {
          zlevel: 0,
          top: "center",
          left: "22%",
          textAlign: "center",
        },

        legend: {
          align: "left", //这个是可以左右调整的
          itemGap: 15,
          orient: "vertical",
          x: "right", //可设定图例在左、右、居中
          y: "center", //可设定图例在上、下、居中
          padding: [0, 40, 0, 0], //可设定图例[距上方距离,距右方距离,距下方距离,距左方距离]
          // data: ["第三针", "第二针", "第一针", "未接种"],
          data: legend,
          textStyle: {
            color: ["#3e9ef5", "#60d691", "#f3e461", "#e76d41"],
            fontSize: 14,
          },
          // legend 自定义拼接数据
          formatter: (name) => {
            // console.log("pie-legend", name);
            let value = data.series.find((v) => v.name == name).value;
            return name + ":" + value + "  人次";
          },
        },
        series: [
          {
            avoidLabelOverlap: true,
            color: ["#3e9ef5", "#60d691", "#f3e461", "#e76d41"],
            type: "pie",
            radius: [40, 60],
            center: ["25%", "50%"],
            data: data.series,
            // data: [
            //   { value: 320, name: "第三针" },
            //   { value: 240, name: "第二针" },
            //   { value: 149, name: "第一针" },
            //   { value: 100, name: "未接种" },
            // ],
            animationEasing: "cubicInOut",
            animationDuration: 2600,
            label: {
              normal: {
                show: false,
              },
            },
            lableLine: {
              normal: {
                show: false,
              },
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "15",
                fontWeight: "bold",
                formatter: `{b}\n{d}%`,
              },
            },
          },
        ],
      }