echarts pie legend设置（自定义文本）

最新推荐文章于 2024-10-14 19:21:07 发布

start_f_scratch

最新推荐文章于 2024-10-14 19:21:07 发布

阅读量3.7k

点赞数

分类专栏： echarts 文章标签： echarts pie

本文链接：https://blog.csdn.net/start_f_scratch/article/details/103276495

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

legend: {
        orient: "vartical",
        x: "left",
        top: "center",
        left: "50%",
        bottom: "0%",
        itemWidth: 8, //图形宽度。
        itemHeight: 8, //图形高度
        itemGap: 16, //图例每项之间的间隔
        // 右侧提示框文字样式
        textStyle: {
          align: "right",
          fontSize: 12,
          rich: {
            // 自定义class
            percent: {
              padding: [0, 0, 0, 10]
            }
          }
        },
        formatter: function(pieDataItem: String) {
          // 返回值
          let reData: String = "";
          switch (pieDataItem) {
            case "未使用":
              return (
                pieDataItem +
                "\r" +
                "{percent|" +
                _this.pieData[0].value +
                "张}"
              );
            case "已使用":
              return (
                pieDataItem +
                "\r" +
                "{percent|" +
                _this.pieData[1].value +
                "张}"
              );
            case "冻结":
              return (
                pieDataItem +
                "\r" +
                "{percent|" +
                _this.pieData[2].value +
                "张}"
              );
          }
          return reData;
        }
      },

在 series 设置 center: ["25%", "50%"], //扇形位置设置，向左侧偏移