echarts 三环圆环_在echarts中圆环图中间 自定义图片引入

首先 打开echarts官网实例

https://www.echartsjs.com/examples/zh/editor.html?c=pie-doughnut

其次复制代码

app.title = '环形图';

option = {

tooltip: {

trigger: 'item',

formatter: "{a}

{b}: {c} ({d}%)"

},

graphic: {

elements: [

{

type: 'image',

style: {

image: "https://yp.a-hh.cn/zhjk/img.jpg",

width: 25,

height: 30

},

left: 'center',

top: '70'

},

{

type: 'text',

left: 'center', // 相对父元素居中

top: '110', // 相对父元素上下的位置

style: {

fill: '#333333',

text: ['总人数'],

font: '12px Arial Normal',

}

}]

},

legend: {

orient: 'vertical',

x: 'left',

data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

},

series: [

{

name:'访问来源',

type:'pie',

radius: ['50%', '70%'],

avoidLabelOverlap: false,

label: {

normal: {

show: false,

position: 'center'

},

emphasis: {

show: true,

textStyle: {

fontSize: '30',

fontWeight: 'bold'

}

}

},

labelLine: {

normal: {

show: false

}

},

data:[

{value:335, name:'直接访问'},

{value:310, name:'邮件营销'},

{value:234, name:'联盟广告'},

{value:135, name:'视频广告'},

{value:1548, name:'搜索引擎'}

]

}

]

};

其实 就是 在option graphic属性中 添加 属性 在elements 第一个对象中 修改 引入图片的位置