Vue 中 Echarts绘图 在一个圆环图或多个圆环图中间插入图片 插入文字（考虑到浏览器大小兼容问题）

之前一直掉进这个坑，没有跳出来，导致自己在这个问题上搞了很久，今天把这个坑写出来，避免大家都去踩这个坑啊~

 在Vue项目结构中，如果引入图片的url不成功，记住，请一定要试一试在路径外加上 require() ！！！ 

 也就是： require(../../images/test.png)

恩~~~现在开始讲一下具体的实现：

（1）首先看一下我们要实现第一种只有一个圆环图中间插入图片，插入文字的效果（文字和图片都要居中）：

 

话不多说，接下来是代码：

在Echarts绘图中插入graphic：

graphic: {
     elements: [{
            type: 'image',
            style: {
                image: require('../../images/test.png'),
                width: 25,
                height: 30
                   },
            left: 'center',
            top: '70'
            },
            {
             type: 'text',
             left: 'center', // 相对父元素居中
             top: '110',  // 相对父元素上下的位置
             style: {
                 fill: '#333333',
                  text: ['总人数'],
                  font: '12px Arial Normal',
                     }
            }]
          },

搞定！！！现在看起来还挺简单的，当时还是弄了老久咯~毕竟初出茅庐嘛嘻嘻~~~

（2）第二种是同时画了两个图，中间插入图片和文字的效果：

最开始以为也可以采用graphic的方法，但是后面试了一下不行呀，我要实现的是每个圆环对应不同的图片，唉呀妈呀脑瓜疼呀脑瓜疼&