echarts的富文本 rich 在IE浏览器引用图片失效不显示的解决方案

写项目中遇到了这样的问题，mac笔记本的chrome浏览器没有问题，但是window的IE浏览器不显示图片。

我在option上边定义了这样的两个图片的链接。（用官网的直接双引号+链接 在我这里没效果，这样写可以显示，给大家借鉴一下。）

let icon = require('../assets/image/bell.svg');
let iconNone = require('../assets/image/transparentbell.svg');

下边是option中引用的代码块：

//以下是写在xAxis中的，根据需求自己变更，如果要在y轴增加富文本就写在yAxis
{
  type: 'category',
  data: this.imageArr,//注意，这个data不赋值的话不能显示图片
  axisPointer: {
    show:false
  },
  axisLabel: {
    formatter (value) {
      return '{' + value + '| }\n';
    },
    rich: {//这里开始是富文本
      value: {
        lineHeight: 30,
        align: 'center'
      },
      bell: {
        height: 20,//图片大小
        align: 'center',
        backgroundColor: {
          image: icon  //iconNone
        }
      },
      transbell: {
        height: 20,
        align: 'center',
        backgroundColor: {
          image: iconNone  //icon
        }
      }
    }
  }

检查了很多遍也没有问题，测了很多echarts官网的demo也不好使，最后发现问题是IE浏览器中没有解析成功svg图像，自测用png的图片是可以在谷歌和IE都正常显示的。

这个是我用的比较好的转格式网址 https://convertio.co/zh/  百度前边几个都不太好用，推荐给大家。

改为png格式就显示成功了。

 let icon = require('../assets/image/bell.png');
 let iconNone = require('../assets/image/transparentbell.png');

下边贴个效果图