之前一直掉進這個坑，沒有跳出來，導致自己在這個問題上搞了很久，今天把這個坑寫出來，避免大家都去踩這個坑啊~
在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繪圖中用到的問題，因爲不僅要簡單的考慮繪圖，還要同時考慮瀏覽器大小的兼容問題，百度了很多，不斷的修改嘗試寫出來的，這個過程是十分的掉頭髮的，但是結果讓人覺得掉的頭髮都是有價值的！啊哈哈哈！有什麼不對的地方也請各位大佬多多指教哦~~