echarts饼图铺满整个div

今天在做公司项目的时候，用了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);

样式如下：

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

echarts饼图铺满整个div相关推荐

web图片铺满网页_web单页面实现多个echarts图表铺满整个div(柱状图，折线图，饼形图……)...
[实例简介] 最近针对web端实现单页面展示多个echarts图表,更直观的展示数据的变化,响应式 [实例截图] [核心代码] charts └── charts ├── css │ ├── bo ...
echarts图形铺满容器
只需要在配置项加上: grid: {top: '50px',left: '50px',right: '15px',bottom: '50px'},
让您的video铺满整个div!
冲! 只需要给video标签添加 object-fit: fill 就是这么简单!冲
css中让图片铺满整个div盒子
盒子是middle #middle{border: 1px solid blue;position: absolute;margin-top:0px ;height: 590px;width: 134 ...
echarts如何让图表占满整个div容器
echarts如何让图表占满整个div容器如下图,我们可以看到echarts图表并未占满div容器,而是被压缩了那么我们需要增加下面的配置项,即可让echarts图表占满整个div容器 grid: ...
video标签样式铺满全屏
video标签是不会自动铺满整个div的,即便是给它设置了高度为100%:所以当需要video标签铺满整个div时,可以给video标签加上'object-fit:fill'样式,这样就可以解决了! ...
小程序、h5图片铺满div，自适应容器大小
图片铺满div,自适应容器大小,不会拉伸变形小程序 mode属性 scaleToFill:缩放模式,不保持纵横比,图片拉伸至填满 image 元素 aspectFit: 缩放模式,保持纵横比,保证图 ...
怎样使div铺满整个屏幕
问题:怎样使div铺满整个屏幕解决办法:设置body宽高都为100%,再设置需要修改的元素宽高为100%
div三行或三列铺满全屏
文章目录一.实现要求二.实现过程 1. 字体水平居中和垂直居中 1.1水平居中: 1.2垂直居中: 2. 行列铺满全屏 2.1 竖排铺满全屏: 2.2 横排铺满全屏: 3. 实现交互三.实现代码 ...

echarts饼图铺满整个div

echarts饼图铺满整个div相关推荐

最新文章

热门文章