echarts饼图问题调整

快来打我* 2024-02-19 11:31 41阅读 0赞

## 1. echarts饼图label显示不全原因？ ##

1.  标签数量过多：当饼图的扇形数量较多时，为了保证图形的清晰性，ECharts 可能不会显示所有的标签，而是选择显示部分标签或者不显示标签。
2.  标签过长：如果标签的文字过长，可能无法在饼图中完全显示，这时候可能需要对标签进行截断或者换行处理。
3.  图形大小不够：如果饼图的大小设置得不够大，可能导致标签无法完全显示。你可以检查一下是否在设置 ECharts 容器时给了足够的尺寸。
4.  标签位置设置：你可以检查一下是否设置了标签的位置，例如 labelPosition属性。如果位置设置不合理，也可能导致标签无法正常显示。
5.  其他设置：还有一些其他的属性设置，如 label 中的 show属性，决定了是否显示标签。如果不显示标签，自然无法显示不全。

### 饼图label显示不全解决办法 ###

#### 1. 未设置前效果 ####

我遇到的问题是label标签重叠了  
![在这里插入图片描述][41851e16dfb948ffa93c62ddcf8daade.png]  
可以看到有十个label的，只显示了5个

#### 2. 设置重叠显示 ####

在`series:`里面添加属性`label`标签的布局

series: [{
        
    	labelLayout: {
        
    		hideOverlap: false // 是否隐藏重叠标签
    	},
    }]

#### 3. 设置后效果 ####

![在这里插入图片描述][dda0f5b5a8354c7f880028432d7dbacb.png]  
可以看到重叠的label也显示出来了，不过效果不是很好

#### 4. 设置角度 ####

在`labelLayout`下面添加以下代码

series: [{
        
    	minAngle: 15, //最小角度
    	startAngle: 270, //起始角度
    }]

#### 5. 最终效果 ####

![在这里插入图片描述][712d0e630ef84873b9643fba5feb2249.png]  
完成

## 2. 饼图标签和饼图靠的太近 ##

### 调整 ###

#### 1. 使用`center`元素进行调整 ####

在`series`中添加 `center`元素  
饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。

支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。

使用示例：

// 设置成绝对的像素值
    center: [400, 300]
    // 设置成相对的百分比
    center: ['50%', '50%']

series: [{
        
    	center:['50%', '20%'],
    }]

#### 2.没设置前效果 ####

![在这里插入图片描述][06d416242cef4421993f0407b311dacc.png]

#### 3.设置后效果，最终效果 ####

在`series`中添加 `center`元素

series: [{
        
    	center:['50%', '20%'],
    }]

![在这里插入图片描述][26c3ac5ba6224e85af25544d5f6cb9b1.png]  
完成

[41851e16dfb948ffa93c62ddcf8daade.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/5ce9cfd667054e6faa46326946cdd535.png
[dda0f5b5a8354c7f880028432d7dbacb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/9b6c33a655e748f5af9ca636e72c9638.png
[712d0e630ef84873b9643fba5feb2249.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/ad903aa61780438f90fb57915005daec.png
[06d416242cef4421993f0407b311dacc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/822aa4116aa64bcc89fad9347dafdeab.png
[26c3ac5ba6224e85af25544d5f6cb9b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/ae9305f1468a4cecb53a7a393c171e3c.png