echarts 饼图内部显示百分比,外部显示文字说明

为了实现产品的要求,饼图中既显示百分比又显示文字的说明(如下图)

在这里插入图片描述

查了echarts 文档,并不能通过简单的配置来实现,原因如下:在单个serie的label中,只能设置一个label,位置可以选择在饼图内部inner,或者饼图外部outer,无法实现同时实现内部、外部显示,想到设置两个serie,让两个饼图完全重合即可,一个外标签显示文字说明,另一个显示内标签,实现百分比。

    series: [
        // 画外部描述的饼图
        {
          type: "pie",
          radius: "65%",
          center: ["50%", "50%"],
          data: [
            {
              name: "深圳市",
              value: 22839,
            },
            {
              name: "长沙市",
              value: 6105,
            },
            {
              name: "重庆市",
              value: 24313,
            },
            {
              name: "天津市",
              value: 43766,
            },
            {
              name: "武汉市",
              value: 56173,
            },
          ],
          label: {
            show: true,
            position: "outside",
            color: "#7F8FA4",
            fontSize: 12,
          },
          labelLine: {
            show: true,
          },
        },
        // 画内部百分比的饼图
        {
          type: "pie",
          data: [
            {
              name: "深圳市",
              value: 22839,
            },
            {
              name: "长沙市",
              value: 6105,
            },
            {
              name: "重庆市",
              value: 24313,
            },
            {
              name: "天津市",
              value: 43766,
            },
            {
              name: "武汉市",
              value: 56173,
            },
          ],
          label: {
            show: true,
            position: "inside",
            formatter: `{d}%`,
          },
        },
      ],

版权声明:本文为weixin_42538281原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。