legend颜色和气泡图颜色不一致echarts 配置项内容和展示

图例中的每一项颜色和气泡图中对应项的颜色不一致。

      option = {
        // color: ["#4883FB", "#ED5555", "#F49857"],
        hoverAnimation: false,
        legend: {
            animation: false,
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 20,
          right: 40,
          textStyle: {
            fontFamily: "PingFangSC-Regular",
            fontSize: 12,
            color: "#4a4a4a"
          },
          data: ["Customer", "New Customer", "Old Customer"]
        },
        grid: {
          top: 29, 
          right: 53, 
          bottom: 20,
          left: 50, 
          containLabel: true
        },
        xAxis: {
          show: true,
          data: ["0~1","2~8","9~20","21~36","37~66","67~109","110~119","120~120"],
          boundaryGap: false,
          name: 'Mins',
          nameLocation: "end",
          nameGap: 10,
          nameTextStyle: {
            fontFamliy: "PingFangSC-Regular",
            fontWeight: "normal",
            fontSize: 12,
            lineHeight: 14,
            color: "#7D7D7D"
          },
          // axisLabel的params从data中取值
          axisLabel: {
            show: true,
            showMinLabel: true,
            // interval: 0,
            margin: 5,
            fontFamily: "PingFangSC-Regular",
            fontWeight: "normal",
            fontSize: 12,
            lineHeight: 14,
            color: "#4A4A4A",
            formatter: value => value
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: "solid",
              color: "#C9D4E9"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: "solid",
              color: "#C9D4E9",
              opacity: 0.4
            }
          }
        },
        yAxis: {
          show: true,
          name: 'ppl',
          nameLocation: "end",
          nameTextStyle: {
            fontFamily: "PingFangSC-Regular",
            fontSize: 12,
            color: "#7D7D7D"
          },
          axisLabel: {
            show: true,
            showMinLabel: false,
            margin: 5,
            fontSize: 12,
            lineHeight: 14,
            fontFamily: "PingFangSC-Regular",
            fontWeight: "normal",
            color: "#4A4A4A",
            formatter: value => value
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#C9D4E9",
              width: 1
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              width: 1,
              type: "solid",
              color: "#C9D4E9",
              opacity: 0.4
            }
          }
        },
        series: [
          {
            name: "Customer",
            type: "scatter",
            silent: true,
            animation: false,
            data: [38,38,38,38,38,38,38,38],
            symbol: "circle",
            symbolSize: function (data) {
              if (data) {
                return 16
              } else {
                return 0
              }
            },
            label: {
              emphasis: {
                show: true,
                formatter: params => {
                  return params.value
                },
                color: "#000",
                position: "top"
              }
            },
            itemStyle: {
                color: "#4883FB"
            },
            emphasis: {
                itemStyle: {
                    color: "#4883FB"
                }
            }
          },
          {
            type: "scatter",
            name: "New Customer",
            data: [30,30,30,30,30,30,30,30],
            symbol: "circle",
            symbolSize: function (data) {
              if (data) {
                return 16
              } else {
                return 0
              }
            },
            label: {
              emphasis: {
                show: true,
                formatter: params => {
                  return params.value
                },
                color: "#000",
                position: "top"
              }
            },
            itemStyle: {
                color: "#ED5555"
            },
            emphasis: {
                itemStyle: {
                    color: "#ED5555"
                }
            }
          },
          {
            type: "scatter",
            name: "Old Customer",
            animation: false,
            data: [8,8,8,8,8,8,8,8],
            symbol: "circle",
            symbolSize: function (data) {
              if (data) {
                return 16;
              } else {
                return 0
              }
            },
            label: {
              emphasis: {
                show: true,
                formatter: params => {
                  return params.value
                },
                color: "#000",
                position: "top"
              }
            },
            itemStyle: {
                color: "#F49857"
            },
            emphasis: {
                itemStyle: {
                    color: "#F49857"
                }
            }
          }
        ]
};