echarts自定义legend图例

效果如下

左边饼图大小通过series属性里面的 radius: [“61%”, “76%”],来调整大小,图例在legend里面调整

    // 成本分析
    changeTabType(val) {
      this.tabType = val;
      let bgColor = "#fff";
      let title = "总计";
      let color = ["#f7c122", "#6395fa", "#62daab", "#657798"];
      let echartData = [
        {
          name: "电费",
          value: "3720",
        },
        {
          name: "药剂费",
          value: "2920",
        },
        {
          name: "设备维修费",
          value: "2200",
        },
        {
          name: "其他",
          value: "1420",
        },
      ];
      this.getChart1(bgColor, title, color, echartData);
    },
    // 成本分析
    getChart1(bgColor, title, color, echartData) {
      let formatNumber = function (num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ",");
      };
      let total = echartData.reduce((a, b) => {
        return a + b.value * 1;
      }, 0);

      let option = {
        color: color,
        tooltip: {
          trigger: "item",
        },

        legend: {
          orient: "vertical",
          icon: "circle",
          itemWidth: 8, // 图例项宽度
          left: "55%",
          itemGap: 14, // 调整图例项之间的间距
          align: "left",
          top: "middle",
          symbolKeepAspect: false,
          textStyle: {
            color: "#333",
            rich: {
              a: {
                verticalAlign: "right",
                align: "left",
                width: 85,
                fontSize: 14,
              },
              b: {
                align: "left",
                fontSize: 12,
                color: "#ff5722",
              },
              df: {
                align: "left",
                fontSize: 12,
                color: "#f7c122",
              },
              yjf: {
                align: "left",
                fontSize: 12,
                color: "#6395fa",
              },
              sbwxf: {
                align: "left",
                fontSize: 12,
                color: "#62daab",
              },
              qt: {
                align: "left",
                fontSize: 12,
                color: "#657798",
              },
            },
          },
          formatter: (name) => {
            let total = 0;
            let target;
            let className = "b";
            for (let i = 0, l = echartData.length; i < l; i++) {
              total += Number(echartData[i].value);
              if (echartData[i].name == name) {
                target = echartData[i].value;
              }
              if (name == "电费") {
                className = "df";
              }
              if (name == "药剂费") {
                className = "yjf";
              }
              if (name == "设备维修费") {
                className = "sbwxf";
              }
              if (name == "其他") {
                className = "qt";
              }
            }
            let str =
              "{a|" +
              name +
              "}{" +
              className +
              "| " +
              target +
              "/" +
              ((target / total) * 100).toFixed(2) +
              "%}";
            return str;
          },
        },
        title: [
          {
            text: "{name|" + title + "}\n{val|" + formatNumber(total) + "}",
            top: "center",
            left: "17%",
            textStyle: {
              rich: {
                name: {
                  fontSize: 18,
                  fontWeight: "normal",
                  color: "#686f78",
                  padding: [8, 35],
                },
                val: {
                  fontSize: 28,
                  fontWeight: "bold",
                  color: "#333333",
                },
              },
            },
          },
        ],

        series: [
          {
            type: "pie",
            radius: ["61%", "76%"],
            center: ["28%", "50%"],
            data: echartData,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                borderColor: bgColor,
                borderWidth: 1,
              },
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 120,
                lineStyle: {
                  color: "#e6e6e6",
                },
              },
            },
            label: {
              show: false,
            },
          },
        ],
      };
      this.charOption = option;
      window.addEventListener("resize", this.listenResize);
    },

----------------------------分割-----------------------------------------
调整图表的时候标题跟着一起动(始终居中) ,标题放在series里

// 表4
    getChart1(bgColor, title, color, echartData, data) {
      let formatNumber = function (num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ",");
      };
      let total = echartData.reduce((a, b) => {
        return a + b.value * 1;
      }, 0);

      let option = {
        color: color,
        tooltip: {
          trigger: "item",
        },
        grid: {
          left: 0,
          right: "10%",
        },
        legend: {
          orient: "vertical",
          icon: "circle",
          itemWidth: 8, // 图例项宽度
          left: "57%",
          itemGap: 18, // 调整图例项之间的间距
          align: "left",
          top: "middle",
          symbolKeepAspect: false,
          textStyle: {
            color: "#333",
            align: "left",
            fontSize: 12,
            rich: {
              a: {
                verticalAlign: "right",
                align: "left",
                width: 85,
                fontSize: 14,
              },
            },
          },
          formatter: (name) => {
            let total = 0;
            let itemRatio = "";
            let className = "";
            let target;
            for (let i = 0, l = echartData.length; i < l; i++) {
              total += Number(echartData[i].value);
              if (echartData[i].name == name) {
                target = echartData[i].value;
                itemRatio = echartData[i].itemRatio;
                className = `color${i}`;
              }
            }
            let str =
              "{a|" +
              name +
              "}{" +
              className +
              "| " +
              target +
              "/" +
              itemRatio +
              "}";
            return str;
          },
        },

        series: [
          {
            type: "pie",
            radius: ["61%", "76%"],
            center: ["24%", "50%"],
            data: echartData,
            avoidLabelOverlap: false,
            hoverAnimation: false,
            labelLine: {
              normal: {
                length: 20,
                length2: 120,
                lineStyle: {
                  color: "#e6e6e6",
                },
              },
            },
            label: {
              show: false,
            },
            tooltip: {
              valueFormatter: function (value) {
                for (let i = 0, l = echartData.length; i < l; i++) {
                  return value + echartData[i].itemUnit;
                }
              },
            },
          },
          // 标题放在这里 
          {
            z: 100,
            type: "gauge",
            radius: "-50%",
            center: ["24%", "50%"], // 需和type: 'pie'中的center一致
            // 配置中间的数字的样式
            detail: {
              // 调节数字位置
              offsetCenter: [-1, 20],
              fontSize: 28,
              fontWeight: "bold",
              color: "#333333",
            },
            pointer: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            // 中间的字和数字 数据
            data: [
              {
                name: "总计",
                value: formatNumber(total),
                title: {
                  // 配置“总计”的样式
                  show: true,
                  fontSize: 18,
                  fontWeight: "normal",
                  color: "#686f78",
                  offsetCenter: ["0", "-10"],
                },
              },
            ],
          },
        ],
      };
      //使用rich，来动态展示legend.title 以不同的颜色描边
      for (let i = 0; i < echartData.length; i++) {
        let key = `color${i}`;

        option.legend.textStyle.rich[key] = {
          color: echartData[i].itemColor,
          align: "left",
          fontSize: 12,
        };
      }

      this.charOption = option;
      window.addEventListener("resize", this.listenResize);
    },