饼图legend显示百分比

最新推荐文章于 2024-08-28 20:06:37 发布

原创最新推荐文章于 2024-08-28 20:06:37 发布 · 6.4k 阅读

10 ·

CC 4.0 BY-SA版权

echarts 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在ECharts的饼图中通过legend显示各部分的百分比，包括使用回调函数formatter进行数据处理，以及如何调整图表的样式。

有时候我们需要在饼图的legend上显示百分比
在这里插入图片描述

var option = {
        title: {},
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: 50,
          y: 10,
          textStyle: {
            color: "#fff"
          },
          // 使用回调函数
          formatter: function(name) {
            var data = option.series[0].data;
            var total = 0;
            var tarValue;
            for (var i = 0, l = data.length; i < l; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            var p = ((tarValue / total) * 100);
            return name + " " + " " + p + "%";
          },
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            magicType: {
              show: true,
              type: ["pie", "funnel"]
            }
          }
        },
        calculable: true,
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [30, 110],
            center: ["60%", "60%"],
            roseType: "area",
            data: [
              { value: 40, name: "泽兰" },
              { value: 15, name: "竹叶" },
              { value: 13, name: "香叶" },
              { value: 10, name: "紫苏" },
              { value: 8, name: "香叶2" },
              { value: 6, name: "地丁" },
              { value: 4, name: "荷叶" },
              { value: 3, name: "鹅不食草" },
              { value: 1, name: "车前草" }
            ],
            labelLine: {
              normal: {
                length: 3, // 改变标示线的长度
                lineStyle: {
                  color: "#fff" // 改变标示线的颜色
                }
              }
            },
            label: {
              normal: {
                textStyle: {
                  color: "#fff" // 改变标示文字的颜色
                }
              }
            }
          }
        ],
        //样式修改
        color: [
          "#74E93A",
          "#FEB23E",
          "#FFF100",
          "#F6B37F",
          "#E56E6E",
          "#40B18E",
          "#409EFF",
          "#FEB763",
          "#F19EC2"
        ]
      };

在这里插入图片描述

label: {
              // 使用回调函数
              formatter: "{d}% {b}",
              textStyle: {
                color: "#fff" // 改变标示文字的颜色
              }