前言
最近遇到一个需求是,echarts饼图向左偏一定位置,但是在饼图中间需要镶嵌图片以及接口查出来的一部分数据,在网上搜了一下,发现比较少,在这里记录一下
以下是最终效果图:
一、echarts进行偏移
首先是对echarts饼图进行向左偏移
series: [
{
name: 'Access From',
type: 'pie',
radius: ['55%', '70%'],
avoidLabelOverlap: false,
center: ['35%', '50%'],// 通过center属性设置偏移量
}
]
二、对echarts中心设置图片和文字展示
1.设置背景图片
通过echarts中的graphic属性设置中心的背景图片
graphic: {
elements: [{// 环形图中间背景图
type: 'image',
style: {
image: totalRisk,
width: 130,
height: 130, //设置图片的宽高度
},
left: "22%",
top: "center", // 设置图片在X轴,Y轴的位置,这里就需要自己调试了
}]
},
2.设置中心文字
在series属性中设置对应的文字
{
name: '中间文字',
z: 100,
type: 'gauge', // 这个type类型要设置为gauge
radius: '-50%',
center: ['35%', '50%'],// 需和type: 'pie'中的center一致
// 配置中间的数字的样式
detail: {
// 调节数字位置
offsetCenter: [-1,12],
color: '#fff',
fontSize:'22px'
},
pointer: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
// 中间的字和数字 数据
data: [
{
value: this.totalRiskCount,
name:'总风险数',
title:{// 配置“总风险数”的样式
show:true,
color: '#fff',
offsetCenter:[0,'20%']// 配置“总风险数”的位置
}
},
],
},
总结
其实通过graphic也可同时设置中间的文字,也可调节文字的位置,但是如果文字是动态的话,就不会一直居中。