Echarts图例显示百分比配置方法

作者:工具松鼠

时间:2026-10-25

浏览:563

本文介绍如何在Echarts中配置图例以显示百分比数据。通过设置legend的相关属性,如type、icon和orient,并结合具体的option配置,实现图例项的百分比展示效果。

文章目录

在Echarts图表中,有时需要展示图例的百分比信息。

效果展示

效果展示

核心代码实现

效果展示

完整代码示例

效果展示

效果展示

效果展示

secondChart = () => {
	//datas的数据是接口拿到的数据
    const { texture } = this.state;
    const datas = texture;
    var option = {
      color: [
        "#3774e5",
        "#4ea9d9",
        "#b041ef",
        "#a25fea",
        "#1b50b3",
        "#8a40ef",
        "#5a8be8",
      ],
      legend: {
        selectedMode: false, // 取消图例上的点击事件
        type: "plain",
        icon: "square",
        orient: "vertical",
        left: "55%",
        top: "0",
        align: "left",
        itemGap: 4,
        itemWidth: 10, // 设置宽度
        itemHeight: 10, // 设置高度
        symbolKeepAspect: false,
        textStyle: {
          rich: {
            name: {
              verticalAlign: "right",
              align: "left",
              width: 75,
              fontSize: 12,
            },
            value: {
              align: "left",
              width: 35,
              fontSize: 12,
            },
            count: {
              align: "left",
              width: 20,
              fontSize: 12,
            },
            upRate: {
              align: "left",
              fontSize: 12,
              color: "#54bef9",
            },
            downRate: {
              align: "left",
              fontSize: 12,
              color: "#54bef9",
            },
          },
          color: "#54bef9",
        },
        data: datas.map((item) => item.name),
        formatter: function (name) {
          var total = 0;
          var tarValue;
          for (var i = 0; i < datas.length; i++) {
            total += datas[i].value;
            if (name === datas[i].name) {
              tarValue = datas[i].value;
            }
          }
          var p = Math.round((tarValue / total) * 100);
          return "{name| " + name + "}  " + "{value| " + p + "%}";
        },
      },
      series: [
        {
          name: "数量",
          type: "pie",
          hoverAnimation: false,
          clockwise: false,
          radius: ["45%", "70%"],
          center: ["30%", "50%"],
          data: datas,
          itemStyle: {
            normal: {
              borderColor: "#021336",
              borderWidth: 4,
            },
          },
          label: {
            normal: {
              show: false,
              position: "center",
              formatter: "{text|{c}}\n{b}",
              rich: {
                text: {
                  align: "center",
                  verticalAlign: "middle",
                  padding: 8,
                  fontSize: 12,
                },
                value: {
                  align: "center",
                  verticalAlign: "middle",
                  fontSize: 12,
                },
              },
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: "12",
              },
            },
          },
          labelLine: {
            normal: {
              show: true,
            },
          },
        },
      ],
    };
    this.Chart_init2 = echarts.init(this.Chart_dom2.current);
    this.Chart_init2.setOption(option);
  };

以上就是关于Echarts实现图例百分比显示的讲解,更多相关内容请查阅本站往期文章或继续浏览后续内容,感谢支持。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章