之前一直掉进这个坑，没有跳出来，导致自己在这个问题上搞了很久，今天把这个坑写出来，避免大家都去踩这个坑啊~
在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的方法，但是后面试了一下不行呀，我要实现的是每个圆环对应不同的图片，唉呀妈呀脑瓜疼呀脑瓜疼，然后反复的在百度上搜索，在echarts官网上看实例看官网（顺便插播一下很好用的Echarts Gallery，上面有很多的Echarts图都可以参考总有一款适合你滴，而且可以直接修改看效果，果然还是挺强大的呀，佩服之心油然而生：）链接http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all），终于功夫不负有心人呀，在不断的摸爬滚打中总算是守得云开见月明啦！！！！！
先来看一看我们实现的效果图：
在这里插播说明一下如何在一个图中绘制两个或者更多个圆环图，就是series写成数组的形式，每一个图相当于是一个对象，分别绘制，在调一下位置就可以。
重点来了！！！
那就是如何每一个圆环图的中间插入对应的不同的图片呢，我找到的一种解决办法，就是在series data里面追加一个专门放图片和文字的对象，代码放出来：
series: [
{
name: '消费情况',
type: 'pie',
radius: ['24%', '35%'],
center: ['25%', '45%'],
avoidLabelOverlap: false,
hoverAnimation: true,
label: {
normal: {
formatter: function(value){
var arr = [
value.data.name,
'￥' + '{b| }' +value.data.value
].join('\n')
return arr
},
rich: {
b: {
fontSize: 14,
lineHeight: 33
},
}
},
},
labelLine: {normal: {show: true}},
data: [
{value: self.one_data1,name: '1啊'},
{value: self.one_data2,name: '2啊'},
{value: self.one_data3,name: '3啊'},
{value: self.one_data4,name: '4啊'},
{
tooltip: {
show:false, //取消鼠标放上去时会显示信息的样式
trigger: 'item',
},
label: {
normal: {
formatter: [
'{c| }',
'{b|总消费}',
].join('\n'),
position: 'center', //让文字居中
show: true,
rich: {
b:{
fontSize: '14px',
fontWeight: 'bold',
color: '#333333',
lineHeight:'26'
},
c: {
backgroundColor: {
image: require('../../images/总消费额.png'),
},
height: 34,
width:35,
left:'center' //让图片居中
},
}} }},
]
},
{
name: '消费情况',
type: 'pie',
radius: ['24%', '35%'],
center: ['75%', '45%'],
avoidLabelOverlap: false,
hoverAnimation: true,
label: {
normal: {
formatter: function(value){
var arr = [
value.data.name,
'￥' + '{b| }' + value.data.value
].join('\n')
return arr
},
rich: {
b: {
lineHeight: 33
},
}
},
},
labelLine: {
normal: {show: true}
},
data: [
{value: self.two_data1, name: '1啊'},
{value: self.two_data2, name: '2啊'},
{value: self.two_data3, name: '3啊'},
{value: self.two_data4, name: '4啊'},
{
name:'总消费',
tooltip: {
show:false, //取消鼠标放上去时会显示信息的样式
trigger: 'item',
},
label: {
normal: {
formatter: [
'{c| }',
'{b|当月消费}',
].join('\n'),
position: 'center', //让文字居中
show: true,
rich: {
b: {
fontSize: '14px',
fontWeight: 'bold',
color: '#333333',
lineHeight:'26'
},
c: {
backgroundColor: {
image: require('../../images/消费.png'),
},
height: 30,
width:30,
left:'center', //让图片居中
},
}
}}},]
}
]
这样写图片和文字就可以定位到各自的圆环中，但是有一个问题就是，这样的图片和文字会附带上鼠标放上去就有文字提示的效果，所以这个的解决办法就是将tooltip:设置显示show为false就可以啦~（代码中有标注！！）
这是一个程序媛在最近用echarts绘图中用到的问题，因为不仅要简单的考虑绘图，还要同时考虑浏览器大小的兼容问题，百度了很多，不断的修改尝试写出来的，这个过程是十分的掉头发的，但是结果让人觉得掉的头发都是有价值的！啊哈哈哈！有什么不对的地方也请各位大佬多多指教哦~~