vue echarts 饼形 pie 基本需求情况

<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’, 饼形是为了不光是饼形上有百分比然后还要有导线的展示。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端代码の搬运工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值