通过graphic将base64的图片渲染到echarts中

drawLine() {
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      let value = 55.33
      let int = value.toFixed(2).split('.')[0]
      var giftImageUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAjCAYAAAD8BaggAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMC1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi40IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQ0OEJGQkQzM0M5QzExRUM5QTc2RDkwMTEyMTVGQUI5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjQ0OEJGQkQ0M0M5QzExRUM5QTc2RDkwMTEyMTVGQUI5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDQ4QkZCRDEzQzlDMTFFQzlBNzZEOTAxMTIxNUZBQjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDQ4QkZCRDIzQzlDMTFFQzlBNzZEOTAxMTIxNUZBQjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4sHCqKAAAEWElEQVR42qxYfWhOURg/99p8hWbGRBRFyB8m/hItIaVoSsg/+EO+lsws2TIfMWJoiSgrlmjTTJl8JRRKmJjCfOQrH2sxar7e7fo9555399z7nnPuvfK+/Z7f89xz7r3n43me+9xrsQsOYxZzf5YElqJ3ATYDy2FlpfTz+rdD7gYfB7eCP4MTyr4sVbcZxsPBBKvgtpUCJUCWoQ/9F0L7BL4Ffg/+AF7hu4fMAd1i5x31qvjtEcAjaN0MK0g4BnkFXKVYkbmQZ8JWymL1jn6rPPscMMswEPp9A08EbkDPVmzpG/BocBvffsYGgd+mbhlTLr1szwTPUrb79R3gZUC2cvsZGwouAueCL4N/qrYPczc6dTrwEBilXRnXbgLnAQ3Q0w0On4BMAxeCy1XbZhtWhng1MMq4Mq5dBG4Bfij7ecfSIJ+AK3QObmsjy2H9gU0hkUe4BNRB+wgu0w7eO7YO8o8u6myD/2yBzAjxrwS4QDq2D2gyDKoefF6bAhyzU98WOcTk9AchH0ttmeDXmlWlVSnUOHwnW6zO6NS9gA1AAawegfYWkZ++AHRkgejbSxMAJyA3GRxeqGciJcZhQDm0PKl9JeShCOfq9PmQc8CL+Pp0Dqg2UmJMIhdyL5hCNwd6e+RzPT1HXCNXHJ8PrvYyda0zkycr/YXugWsk2wYP5lk2fAKync2Tp8UWA7Z0/A3kaHAb40nKYRdh9AXv5Nk02dHpvFgbd3DG3gm7A/Zb35PaCTy5/XZX2PnQSqBnSNf1MrjF1vOottywp/9JNNRooqMn5K6Q8DfZ24E9QIYhwVJipUcLxnSat1C0NPLZqPednG4ytJsx/C1pDwSeQusT4l+nIBfaYqSU0LoaZkBD2h+SSHU1lZvBTfWWC4q6SXSDGfxprn+KJ/UJwJIIF1ad62Zw8z1o0svJ21dFuHCj8IVioM8/+NMvYH1I+UI8gFYoU/EADF54DY8Sh00Hxsdw6uGSfVY8iE2DumGLjqZR1wFXxbEXwLUYK1MesNcCCc3W3gEOw7edHrxGsaQc5Hn+T2AMtFcxI4swDbjMNX/7CvA4qe9vXthRIcjNkzz450GvVoTjTjAlzpEhFeORgJ0mbjIW2BVybjqftMW6A1PdAbmdrkNOkU56L3LPfZ5hTQ9MSxzx2vLBFTFWtQM8gSZhBxy3XdrTjRxykcZCcw6hH2RpzEisBDe4BZrX4QFQ2akzvIc5bGmEUA3qW8WgokZiq5h4oGJ0mfLMV2hHwRsivdn6BzVEvArFyVHbgGZ/Te0NqlnM8LnIzMxYcqaCKoK7MbbrCWSF3G4riu0D4O/8TVP/5qDTHVFqOBEnUChq7cCA/Df8A0lJaq/vwtEHRSt0PMLHi1qgPngdi1U56k8jLs8GF4vyxFScZypKjmfQeoNfBtp+0CcO/mnHfc8PFPlVjm4wZg7X6Q2kTJGpjTnJVn6nicLh+j4eHPGqy4BT/99BqUuOEPuvAAMA0DDPvmidUBEAAAAASUVORK5CYII="
      var option = {
        title: {
          text: '{a|' + int + '%}',
          x: 'center',
          show: false,
          y: 'center',
          textStyle: {
            rich: {
              a: {
                fontSize: 20,
                color: 'rgba(0, 156, 255, 1)'
              }
            }
          }
        },
        graphic: {
          elements: [{
            type: 'image',
            style: {
              image: giftImageUrl,
              width: FontChart(36),
              height: FontChart(35)
            },
            left: 'center',
            top: 'center'
          }]
        },
        series: [
          {
            type: 'gauge',
            radius: '90%',
            clockwise: true,
            startAngle: '90',
            endAngle: '-269.9999',
            splitNumber: 25,
            detail: {
              offsetCenter: [0, -10],
              formatter: ' '
            },
            pointer: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [0, 'rgba(0, 156, 255, 1)'],
                  [52 / 100, 'rgba(0, 156, 255, 1)'],
                  [1, 'rgba(0, 156, 255, 0)']
                ],
                width: 6
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              length: 6,
              lineStyle: {
                color: '#485C68',
                width: 3
              }
            },
            axisLabel: {
              show: false
            }
          },
          {
            type: 'pie',
            name: '内层细圆环',
            radius: ['96%', '98%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                color: 'rgba(88, 118, 143, 1)'
              }
            },
            label: {
              show: false
            },
            data: [100]
          },
          {
            type: 'pie',
            name: '内层细圆环',
            radius: ['75%', '77%'],
            hoverAnimation: false,
            clockWise: true,
            itemStyle: {
              normal: {
                color: 'rgba(88, 118, 143, 1)'
              }
            },
            label: {
              show: false
            },
            data: [100]
          }
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },