使用title、graphic属性在Echarts 饼图中间添加文字
Echarts 的饼图中间添加文字说明 ,主要使用graphic、title来完成配置,效果图如下:
代码示例:
// 指定图表的配置项和数据 var option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, color:["#27D9C8","#D8D8D8"], title:{ text:"80%", left:"center", top:"50%", textStyle:{ color:"#27D9C8", fontSize:36, align:"center" } }, graphic:{ type:"text", //使用graphic来调节标题的样式以及位置 left:"center", top:"40%", style:{ text:"运动达标率", textAlign:"center", fill:"#333", fontSize:20, fontWeight:700 } }, series: [ { name: '运动情况', type: 'pie', radius: ['65%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, }, data: [ { value: 80, name: '已完成' }, { value: 20, name: '未完成' }, ] } ] };