项目中遇到这种需求,有两种解决方法,
一.在echarts的配置手册中搜graphic属性,并配置,可以在圈内显示固定的文字
graphic: [
{ //环形图中间添加文字
type: 'text', //通过不同top值可以设置上下显示
left: 'center',
top: '55%',
style: {
text: join,
textAlign: 'center',
fill: '#1eb4ff', //文字的颜色
width: 30,
height: 30,
fontSize: 14,
fontFamily: "Microsoft YaHei",
}
}
]
ps:不过这样写有个弊端,就是必须写4个环图并配置属性,非常麻烦.于是提供下面一种做法.
二.搜索echarts中的series属性,可以配置多个饼图或者环图,不过此时它们会重叠在一起,然后搜索series.center属性,可以在配置series时,改变每个图的位置.结合下面代码的第一个series配置看.
let dom = this.$refs.classDataPic
let myChart = this.$echarts.init(dom)
myChart.setOption({
tooltip: { //此处配置鼠标移动对应区域时的黑色弹框
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
series: [
{
name: '发布课堂', //配置formatter时候会用到(就是{a})
type: 'pie',
radius: ['45%', '55%'], // 配置饼图和环图的内圆和外圆的大小
center: ['13%', '50%'], //配置图形的位置,前面一个是x轴,后面一个是y轴,'50%'代表是水平居中
avoidLabelOverlap: false,
label: {
normal: {
show: false, //默认显示关闭,如果此处是true,则数据重叠
position: 'center', //显示的位置,center是饼环图中间显示,
formatter: `{a}\n${7}` //此处的7为假数据,其实就是下面data数组中的value相加,都可以取到的,但是此处都是模拟数据
},
emphasis: {
show: true,
}
},
data: [
{ value: 5, name: '公开课', label: { show: true } },
{ value: 2, name: '私有课', label: { show: false } },
//此处label: { show: false }就是不让饼环图中间的数据改变,因为黑色消息窗可以改变,此处固定文本就行了.
]
},
{
name: '总用户数',
type: 'pie',
radius: ['45%', '55%'],
center: ['38%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
formatter: `{a}\n${50}`
},
emphasis: {
show: true,
}
},
data: [
{ value: 18, name: '男', label: { show: true } },
{ value: 30, name: '女', label: { show: false } },
{ value: 2, name: '未知', label: { show: false } }
]
},
{
name: '实验数',
type: 'pie',
radius: ['45%', '55%'],
center: ['63%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center',
formatter: `{a}\n${18}`
},
emphasis: {
show: true,
}
},
data: [
{ value: 12, name: '在线实验', label: { show: true } },
{ value: 6, name: '非在线实验', label: { show: false } }
]
},
{
name: '作业情况',
type: 'pie',
radius: ['45%', '55%'],
center: ['88%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center',
formatter: `{a}\n${12}`
},
emphasis: {
show: true,
}
},
data: [
{ value: 4, name: '准时提交', label: { show: true } },
{ value: 8, name: '超时提交', label: { show: false } }
]
}
]
})