话不多说,直接上代码:
option ={
tooltip: {
trigger: 'item' // 鼠标悬浮显示
},
// legend: { // 图例
// top: '5%',
// left: 'center'
// },
graphic: [
{
type: 'image', // 插入圆环中间的图片
style: {
image: require('./echartBg.png'), // 本地图片要用require引入
width: 76, // 设置图片大小
height: 76
},
// 设置图片位置
left: 'center',
top: '20%'
},
{ //环形图中间添加文字
type: 'text', //通过不同top值可以设置上下显示
left: 'center',
top: '38%',
style: {
text: '85%',
textAlign: 'center',
fill: '#f8f8f8', //文字的颜色
width: 30,
height: 30,
fontSize: 16,
fontFamily: "Microsoft YaHei"
}
},
// 写了两个文字插入是因为业务要求两行不一样样式的字
{ //环形图中间添加文字
type: 'text', //通过不同top值可以设置上下显示
left: 'center',
top: '53%',
style: {
text: '互认率',
textAlign: 'center',
fill: '#fff', //文字的颜色
width: 30,
height: 30,
fontSize: 12,
fontFamily: "" // 这个自己看着办
}
}
],
color: ['#15B1FA', '#F0F3F6'], // 圆环的颜色组
series: [
{
name: 'Access From',
type: 'pie',
radius: ['60%', '80%'],
// avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: this.chartData
}
]
}
// 兄弟姐们好使的话,支持一下,谢谢
// 下边是我的本地数据
chartData: [
{ value: 15, name: 'Search Engine' },
{ value: 85, name: 'Direct' },
],