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');

下邊貼個效果圖