echarts自定义legend形状

实现效果：

自动轮播效果请见：自动轮播函数封装

option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        // legend: {
        //     // orient: 'vertical',
        //     // top: 'middle',
        //     bottom: 10,
        //     left: 'center',
        //     data: ['类型一', '类型二', '类型三', '类型四', '类型五']
        // },
        legend: [
          {
            bottom: 10,
            left: "0",
            textStyle: {
              color: "#00A8FF",
              fontSize: 15,
              fontFamily: "微软雅黑",
            },
            itemWidth: 15,
            itemHeight: 15,
            data: [
              {
                name: "类型一",
                icon: "circle",
              },
            ],
          },
          {
            bottom: 10,
            left: "20%",
            textStyle: {
              color: "#FFA11A",
              fontSize: 15,
              fontFamily: "微软雅黑",
            },
            itemWidth: 15,
            itemHeight: 15,
            data: [
              {
                name: "类型二",
                icon: "circle",
              },
            ],
          },
          {
            bottom: 10,
            left: "40%",
            textStyle: {
              color: "#FFEA00",
              fontSize: 15,
              fontFamily: "微软雅黑",
            },
            itemWidth: 15,
            itemHeight: 15,
            data: [
              {
                name: "类型三",
                icon: "circle",
              },
            ],
          },
          {
            bottom: 10,
            left: "60%",
            textStyle: {
              color: "#71F003",
              fontSize: 15,
              fontFamily: "微软雅黑",
            },
            itemWidth: 15,
            itemHeight: 15,
            data: [
              {
                name: "类型四",
                icon: "circle",
              },
            ],
          },
          {
            bottom: 10,
            left: "80%",
            textStyle: {
              color: "#3FFFEA",
              fontSize: 15,
              fontFamily: "微软雅黑",
            },
            itemWidth: 15,
            itemHeight: 15,
            data: [
              {
                name: "类型五",
                icon: "circle",
              },
            ],
          },
        ],
        series: [
          {
            type: "pie",
            color: ["#00A8FF", "#FFA11A", "#FFEA00", "#71F003", "#3FFFEA"],
            radius: "60%",
            center: ["50%", "40%"],
            selectedMode: "single",
            data: [
              { value: 40, name: "类型一" },
              { value: 15, name: "类型二" },
              { value: 15, name: "类型三" },
              { value: 15, name: "类型四" },
              { value: 15, name: "类型五" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };