<v-chart class="radar-chart" :options="options"></v-chart>
return{
options : {
title: {
text: `试卷分类占比`,
left: 'left'
},
tooltip: {
trigger: 'item'
},
// legend: {
// // orient: 'vertical',
// // left: 'left',
// },
series : [
// 设置百分比的饼状图
{
name:'类型',
type:'pie',
radius: ["20%", "70%"],// 环形图的关键。70%为外半径,20%为内半径,中间10%即环形的宽度
center: ['50%', '60%'],//调整饼图位置
itemStyle : {
normal : {
label:{ //饼图图形上的文本标签
show:true,
position:'inner', //标签的位置
textStyle : {
fontWeight : 300 ,
fontSize : 12 //文字的字体大小
},
formatter:function(data){ return data.percent.toFixed(0)+"%";}
},
labelLine : {
show : false //隐藏标示线
}
}
},
data: [
{value:0, name:'肺脏',itemStyle:{color:`#30a6d2`}},
{value:0, name:'综合',itemStyle:{color:`#42aeae`}},
{value:0, name:'心脏',itemStyle:{color:`#e0b364`}},
],
},
{ // 设置指示线和指示线上的文字的饼状图
name:'类型',
type:'pie',
radius: ["20%", "70%"],// 环形图的关键。90%为外半径,80%为内半径,中间10%即环形的宽度
center: ['50%', '60%'],
itemStyle : {
normal : {
label:{ //饼图图形上的文本标签
show : true
},
labelLine : {
show : true //隐藏标示线
}
}
},
data: [
{value:0, name:'肺脏',itemStyle:{color:`#30a6d2`}},
{value:0, name:'综合',itemStyle:{color:`#42aeae`}},
{value:0, name:'心脏',itemStyle:{color:`#e0b364`}},
],
}
]
},
}
1、itemStyle 里的formatter是为了算的百分比避免出现小数点。
2、写两组type:‘pie’, 饼形是为了不光是饼形上有百分比然后还要有导线的展示。