echarts饼图指示线文字自定义（显示指示线和百分比）

蓝胖子的多啦A梦

已于 2023-09-25 09:16:36 修改

阅读量5k

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2023-05-30 14:05:36 首次发布

本文链接：https://blog.csdn.net/Maxueyingying/article/details/130946995

版权

在这里插入图片描述

1.指示线显示具体数值

formatter: "{c}"

代码：

 series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            center: ['50%', '46%'],
            data: this.chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 22
                },
                formatter: "{c}"
              },
            },

          },
        ],

2.指示线显示百分比

formatter: "{d}"
在这里插入图片描述

   series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            center: ['50%', '46%'],
            data: this.chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 22
                },
                formatter: "{d}"
              },
            },
          },
        ],

2.指示线显示文字

formatter: "{b}" 也可以不设置 默认展示文字，和图例文字保持一致
在这里插入图片描述

 series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            center: ['50%', '46%'],
            data: this.chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 22
                },
                formatter: "{b}"
              },
            },
          },
        ],