Echarts实现好看的饼图 (pie）

最新推荐文章于 2025-03-03 10:59:48 发布

想念

最新推荐文章于 2025-03-03 10:59:48 发布

阅读量4.2k

点赞数

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/zhaoxin_1989/article/details/104693685

版权

echarts 专栏收录该内容

2 篇文章

订阅专栏

1.echarts实现好看的饼图（pie）

在这里插入图片描述

2.实现代码

      this.chPie = echarts.init(document.getElementById("gender-pie-chart"));
      var nameData = ["Males", "Females"];
      var option = {
        animation: true,
        title: {
          x: "center",
          y: "center",
          textStyle: {
            color: "red",
            fontSize: 60,
            fontWeight: "normal",
            align: "center",
            width: "200px"
          },
          subtextStyle: {
            color: "red",
            fontSize: 20,
            fontWeight: "normal",
            align: "center"
          }
        },
        legend: {
          width: "50%",
          left: "center",
          textStyle: {
            color: "#9B9B9B",
            fontSize: 16
          },
          icon: "circle",
          right: "0",
          bottom: "0",
          top: "75%",
          itemGap: 20,
          data: nameData
        },
        series: [
          {
            type: "pie",
            center: ["50%", "35%"],
            radius: ["30%", "40%"],
            color: ["#3A86D9", "#DD0C75"],
            startAngle: 135,
            labelLine: {
              normal: {
                length: 25
              }
            },
            label: {
              normal: {
                // formatter: "{c}\n{d}%",
                formatter: "\n{d}%",
                backgroundColor: "rgba(255, 147, 38, 0)",
                borderColor: "transparent",
                borderRadius: 4,
                textStyle: {
                  color: "#4a4a4a",
                  fontSize: 16
                }
              }
            },
            // data: data
            data: [
              { value: 32, name: "Males" },
              { value: 23, name: "Females" }
            ]
          }
        ]
      };
      this.chPie.setOption(option);
    }