今天在做公司项目的时候，用了echarts的一个饼图，设置了当前这个饼图形成的div的大小，init一个饼图的时候，总感觉这个饼图没有办法铺满整个div，主要是上下留白的空隙太大，影响布局，如图所示：

?期望：饼图能够尽可能的铺满，上下的空隙小一点

?查了点资料很多都说设置grid这个属性的，但是grid这个属性主要是对柱状图起作用。

最终发现其实就是series里面的radius属性来控制这个大小的

?

radius属性第一个百分数设置内圈大小

radius属性第一个百分数设置外圈的大小，也就是设置到100% 形成的饼图上下正好顶到div的最上面和最下面 铺满整个div

?我的饼图的整个代码如下：

let myChart = this.$echarts.init(document.getElementById('equipmentStatus')); let option = { tooltip: {}, graphic: [ { type: 'text', //通过不同top值可以设置上下显示 left: '42%', top: '45%', style: { text: '123台', textAlign: 'center', fill: '#000', //文字的颜色 fontSize: 24, } } ], color: ['#61a5e8', '#7ecf51', '#eecb5f', '#e3935d','#e16757'], series: [ { name: '设备状态', type: 'pie', radius: ['70%', '100%'], center: ['50%', '50%'], avoidLabelOverlap: false, normal: { borderWidth: 2, borderColor: '#fff', }, label: { show: false, position: 'center', normal: { show: true, position: 'center', formatter: `{a}\n${50}` }, emphasis: { show: true, } }, data: [ { value: 99, name: '健康设备',label: { show: false } }, { value: 20, name: '亚健康设备' ,label: { show: false }}, { value: 3, name: '有隐患设备' ,label: { show: false }}, { value: 1, name: '未检测设备',label: { show: false } } ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

样式如下：

希望我的回答对你们能有帮助。?

?

?

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。