echarts 圆环图中间插图或文字

话不多说，直接上代码：

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' },

],