echarts饼图文本溢出屏幕

拼搏现实的明天。 2022-12-26 04:45 215阅读 0赞

![20201203113947831.png][]

## 解决办法： ##

对字符串自适应截取。

label: {
                                normal: {
                                    formatter(v) {
                                        let text = v.name
                                        if (text.length <= 6) {
                                            return text = text + '\n' + v.percent + '%';
                                        } else if (text.length > 6 && text.length <= 12) {
                                            return text = `${text.slice(0,6)}\n${text.slice(6)}` + v.percent + '%'
                                        } else if (text.length > 12 && text.length <= 18) {
                                            return text = `${text.slice(0,6)}\n${text.slice(6,12)}\n${text.slice(12)}` + v.percent + '%'
                                        } else if (text.length > 24 && text.length <= 30) {
                                            return text = `${text.slice(0,6)}\n${text.slice(6,12)}\n${text.slice(12,18)}\n${text.slice(24)}` + v.percent + '%'
                                        } else if (text.length > 30) {
                                            return text = `${text.slice(0,6)}\n${text.slice(6,12)}\n${text.slice(12,18)}\n${text.slice(24,30)}\n${text.slice(30)}` + v.percent + '%'
                                        }
                                    },
                                    textStyle: {
                                        fontSize: 10
                                    }
                                }
                            }

[20201203113947831.png]: /images/20221120/a700be3fb8524b15b1a5cd7ad06b8837.png