笔记：Echarts 饼图 图例legend 自定义 换行

配置后效果：👇

配置：

let option = {
    legend: [
          {
            data: ["融云", "融AI", "融安全", "融平台"],
            show: true,
            right: "3%",
            bottom: "20%",
            left: "center",
            icon: "rect",
            itemWidth: 5,
            itemHeight: 5,
            // 图例项之间的水平间距
            itemGap: 100,
            formatter: function (name) {
              let value = data.filter((v) => {
                return v.name == name;
              });
              if (name == "融云") {
                return `{label| ${name}: }\n {valueColor1|${
                  value.length > 0 ? value[0].value : 0
                }%}`;
              } else if (name == "融AI") {
                return `{label| ${name}: }\n {valueColor2|${
                  value.length > 0 ? value[0].value : 0
                }%}`;
              } else if (name == "融安全") {
                return `{label| ${name}: }\n {valueColor3|${
                  value.length > 0 ? value[0].value : 0
                }%}`;
              } else if (name == "融平台") {
                return `{label| ${name}: }\n {valueColor4|${
                  value.length > 0 ? value[0].value : 0
                }%}`;
              }
            },
            textStyle: {
              fontSize: 12,
              color: "#fff",
              rich: {
                label: {
                  overflow: "truncate",
                  ellipsis: "...",
                  fontSize: 12,
                  fontFamily: "Microsoft YaHei",
                  fontWeight: 400,
                  color: "rgba(160, 206, 224, 1)",
                  padding: [-15, 0, 0, 0],
                },
                valueColor1: {
                  overflow: "truncate",
                  ellipsis: "...",
                  fontSize: 18,
                  fontFamily: "ywptFont",
                  fontWeight: 400,
                  color: "#1630ff",
                  padding: [-40, 0, 0, 0],
                },
                valueColor2: {
                  overflow: "truncate",
                  ellipsis: "...",
                  fontSize: 18,
                  fontFamily: "ywptFont",
                  fontWeight: 400,
                  color: "#b4c9ef",
                  padding: [-40, 0, 0, 0],
                },
                valueColor3: {
                  overflow: "truncate",
                  ellipsis: "...",
                  fontSize: 18,
                  fontFamily: "ywptFont",
                  fontWeight: 400,
                  color: "#c700fc",
                  padding: [-40, 0, 0, 0],
                },
                valueColor4: {
                  overflow: "truncate",
                  ellipsis: "...",
                  fontSize: 18,
                  fontFamily: "ywptFont",
                  fontWeight: 400,
                  color: "#df3e27",
                  padding: [-40, 0, 0, 0],
                },
              },
            },
          },
          {
            data: ["融网", "融大数据", "容量子"],
            show: true,
            right: "3%",
            bottom: "10%",
            left: "3%",
            icon: "rect",
            itemWidth: 5,
            itemHeight: 5,
            // 图例项之间的水平间距
            itemGap: 90,
            formatter: function (name) {
              let value = data.filter((v) => {
                return v.name == name;
              });
              if (name == "融网") {
                return `{label| ${name}: }\n {valueColor5|${
                  value.length > 0 ? value[0].value : 0
                }%}`;
              } else if (name == "融大数据") {
                return `{label| ${name}: }\n {valueColor6|${
                  value.length > 0 ? value[0].value : 0
                }%}`;
              } else if (name == "容量子") {
                return `{label| ${name}: }\n {valueColor6|${
                  value.length > 0 ? value[0].value : 0
                }%}`;
              }
            },
            textStyle: {
              fontSize: 12,
              color: "#fff",
              rich: {
                label: {
                  overflow: "truncate",
                  ellipsis: "...",
                  fontSize: 12,
                  fontFamily: "Microsoft YaHei",
                  fontWeight: 400,
                  color: "rgba(160, 206, 224, 1)",
                  padding: [-15, 0, 0, 0],
                },
                valueColor5: {
                  overflow: "truncate",
                  ellipsis: "...",
                  fontSize: 18,
                  fontFamily: "ywptFont",
                  fontWeight: 400,
                  color: "#7dffbb",
                  padding: [-40, 0, 0, 0],
                },
                valueColor6: {
                  overflow: "truncate",
                  ellipsis: "...",
                  fontSize: 18,
                  fontFamily: "ywptFont",
                  fontWeight: 400,
                  color: "#ff9900",
                  padding: [-40, 0, 0, 0],
                },
              },
            },
          },
        ],
}