echarts图通用常用配置---图例和背景图配置

1.图表的图例

这个一个饼状环形图，右侧的部分叫做--图例，在很长一段时间我把它叫做标签，导致出现问题百度都找不到对应的问题点😢。 还有今天才知道echarts还可以使用图片给它加背景图。下面代码内容有加图片背景和给环形图设置外围圆环，还有图例的常用配置项😍

orderPie(data) {
    let option = {
      //这里是关于图片的配置
      graphic: [
        {
          type: "image", // 图形元素类型
          id: "logo", // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
          right: "right", // 根据父元素进行定位 （居中）
          bottom: "20%", // 根据父元素进行定位   （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
          left: "70%",
          z: 0, // 层叠
          bounding: "all", // 决定此图形元素在定位时，对自身的包围盒计算方式
          style: {
            // image: "../../../assets/images/projectShi/huantu.png", // 这里一定要注意、注意，必须是https开头的图片路径地址
            // image: "https://www.boxuegu.com/assets/user/background1.png",
            width: 120,
            height: 200
          }
        }
      ],
      //这里是关于图例的配置
      legend: [
        {
          orient: "vertical",
          show: true,
          color: "#92C5CF",
          //图例的位置
          top: "5%",
          // bottom: "30%",
          right: "5%",
          itemWidth: 15, //图例宽高
          itemHeight: 8,
          itemGap: 15, //图例间的间隔
          padding: [10, 20],
          //图例文字的颜色和字体大小配置
          textStyle: {
            rich: {
              numStyle: {
                fontSize: 14,
                lineHeight: 13,
                color: "#fff",
                fontFamily: "PingFangSC-Medium, PingFang SC"
              },
              nameStyle: {
                fontSize: 13,
                lineHeight: 13,
                color: "#92C5CF",
                fontFamily: "PingFangSC-Medium, PingFang SC"
              }
            }
          },
          //鼠标经过图例显示的文字内容和一些内容属性的配置
          formatter: function(name) {
            let res = data.filter(v => v.name === name);
            res = res[0] || {};
            return (
              "{numStyle|" +
              res.value +
              "吨" +
              "}" +
              "\r\n{nameStyle|" +
              res.name +
              // "吨" +
              "}"
            );
          },
          data: data
        }
      ],
      series: [
        {
        //环状图颜色的配置
          color: [
            "#F56C6C",
            "#DEA447",
            "#E2C875",
            "#60E2E3",
            "#6DBF8C",
            "#5380BC",
            "#CB58AC"
          ],
          type: "pie",
          radius: ["50%", "75%"],
          center: ["30%", "65%"],
          //这里是把环状图旋转到合适的角度，因为有时候引导线会被遮住，通过旋转可以解决
          minAngle: 15, //最小角度
          startAngle: 280, //起始角度
          // avoidLabelOverlap: true, //对，就是这里avoidLabelOverlap
          top: 20,
          left: 20,
          right: 0,
          bottom: 100,
          data: data,
          label: {
            normal: {
              // padding: [100, 5, 0, 0],
              rich: {
                nameStyle: {
                  fontSize: 15,
                  lineHeight: 17,
                  color: "#92C5CF",
                  fontFamily: "PingFangSC-Medium, PingFang SC"
                },
                numStyle: {
                  fontSize: 14,
                  lineHeight: 17,
                  color: "#92C5CF",
                  fontFamily: "PingFangSC-Medium, PingFang SC"
                }
              },
              formatter: params => {
                return (
                  "{nameStyle|" +
                  params.name +
                  "}" +
                  "\n" +
                  "{numStyle|" +
                  params.value +
                  "吨" +
                  "}"
                );
              }
            }
          }
        },
        {
        //这里是环形图外边那个灰色的圆环的配置
          type: "pie",
          //radius: ['105', '110'],
          radius: ["90%", "95%"],
          center: ["30%", "65%"],
          top: 20,
          left: 20,
          right: 0,
          bottom: 100,
          data: [100],
          color: ["#5071AE3D"],
          label: {
            show: false
          }
        }
      ]
    };
    return option;
  }
};