记一个echarts的scatter自定义symbol变成红色圆点的问题

我们做了一个地图，地图上要用柱状展示各地市的数据高低，柱状底部用我们自定义的图片

首先给出自定义图片正确的引入方式，官方提供三种方式，我使用的是image/base64

const POS_IMAGE = new Image(21, 10)
POS_IMAGE.src = require('../asset/.../pos.png')
POS_IMAGE.alt = 'icon'

在symbol中调用POS_IMAGE.src

{
  type: 'scatter',
  coordinateSystem: 'geo',
  geoIndex: 0,
  zlevel: 9,
  label: { // 文字样式
    formatter: '{b}',
    position: 'bottom',
    color: '#fff',
    fontSize: 14,
    distance: 10,
    show: true
  },
  // 自定义图标
  symbol: function (value, params) {
    const icon = `image://${POS_IMAGE.src}` // 使用POS_IMAGE
    var list = Array(data.length).fill(icon) // data是地市数据数组
    return list[params.dataIndex]
  },
  symbolSize: [30, 20],
  silent: true,
  data: this.scatterData()
},

这样看起来没问题，但部署后发现图标偶尔会变成红色圆点。
把symbol改成：symbol: 'circle'，会发现显示的就是红色圆点；以此推测，是使用自定义图标的时候，组件存在无法加载到自定义图标 或 同时把系统默认图标加载进来的问题。

在symbol字段下面添加字段：

itemStyle: {
    color: 'transparent'
},

这样可以更改组件自带的图标颜色，transparent表示透明。
这样尝试后，红色圆点没了，自定义图标是正确加载的，说明上面遇到的问题是组件把默认图标也加载进来了，并且默认图标比较大，把自定义图标给覆盖掉了。