饼图这个东西看起来是 ECharts 里最简单的一类图表但真到了要调样式的时候很多人会卡在同样的几个地方饼图大小怎么调都感觉不对劲、图例总是压在饼图上、指示文字挤成一团、引导线末尾的小圆点怎么都对不齐。我自己在后台报表里画了不下几十个饼图和环形图从最开始的能显示就行到后来开始抠像素级的细节中间踩的坑基本都集中在 radius、center、legend 和 labelLine 这四个配置簇上。这篇就把这些配置项按实际使用顺序拆开讲清楚顺便把 pxtorem 对 ECharts 不起作用、容器塌陷、tooltip 不换行这些高频问题一并说透。适合已经能用 ECharts 画出饼图、但想让它在真实业务页面里更稳更整齐的前端同学如果你刚开始接触 ECharts文中的配置也能直接抄走用。1. 饼图配置的三个战场series、legend、tooltip 各管什么1.1 先搞清楚 ECharts 配置项的分层逻辑很多人改饼图样式的效率低根本原因不是不熟悉 API而是没搞清楚一个问题该改哪个字段。ECharts 的配置是分层覆盖的饼图的视觉结果由三层叠加而成最外层是option的全局配置中间层是legend、tooltip、title这些周边组件最内层才是series[i]里属于饼图自己的配置。举个最容易混淆的例子你想让饼图的标签文字变小。这个标签文字到底是legend.textStyle、tooltip.textStyle还是series.label.fontSize三者都叫文字样式但管的东西完全不同——legend.textStyle管图表上方或右侧那排图例的名字tooltip.textStyle管鼠标悬浮时弹出的浮层series.label才是围着扇形那一圈。我见过不少人改了legend.textStyle.fontSize之后发现扇形旁边的字一点没变然后开始怀疑是不是版本问题。同理饼图大小这件事也不是单一字段能决定的。series.radius控制圆本身多大series.center控制圆心在容器的哪个位置而容器本身的宽高又是由你的 CSS 决定的。三者任一变化视觉结果都会变。把它当成一个三方博弈来理解调起来会顺很多。还有一层容易忽略的是默认值。ECharts 给饼图设了一批默认值这些默认值在简单场景下很好用但在定制场景里就是干扰项。下面这张表是我最常需要主动覆盖的几个默认行为配置项默认行为什么时候必须改radius约为容器较短边的 75%容器是扁长形或旁边要放图例center[50%, 50%]容器正中图例占了顶部或右侧空间startAngle90即从 12 点方向逆时针起画想让占比最大的扇形从右侧开始avoidLabelOverlaptrue数据项极少时想精确控制标签位置minAngle0有极小占比的数据项标签会挤在一起label.positionoutside环形图要在圆心放汇总数字提示饼图的radius、center里的百分比参照物是容器的宽和高中较小的那个不是宽。这一点和很多人直觉里的按宽度算不一样也是扁形容器里饼图看起来偏小的原因。1.2 饼图最容易被忽略的三个默认值第一个是startAngle。默认 90 意味着第一个数据项从 12 点方向开始并且是逆时针排布。绝大部分设计稿画的饼图是从右侧 3 点方向顺时针走的这时候你得把startAngle设成 90 加上一个偏移或者干脆改成-90之类的值去试。别小看这个扇形顺序错了做出来的图虽然能看但和设计稿一比就是不对味。第二个是avoidLabelOverlap。它默认开启会自动把挤在一起的标签上下推开代价是引导线的角度会变得很怪短扇形对应的标签可能被甩到很远的地方。数据项少于 5 个、每项占比都还行的时候我一般会把它关掉自己用labelLayout去控。数据项十几个的小占比场景才需要它来兜底。第三个是itemStyle.borderWidth默认是 0也就是扇形之间没有缝隙。做环形图时加上 2px 的白色描边和圆角质感会立刻不一样这个后面细说。2. 饼图大小到底由谁决定radius、center 和容器三方博弈2.1 百分比半径与像素半径的适用边界radius支持两种写法字符串百分比比如70%以及数字单位是像素比如120。环形图还能写成数组[40%, 70%]表示内半径和外半径中间挖空。选哪种写法判断标准只有一个这个图表的尺寸会不会随窗口变化。响应式布局里容器宽度是不确定的这时候必须用百分比让饼图跟着容器缩放。反过来如果图表被放在一个固定宽高的卡片里或者你在做可视化大屏的某个固定格子用像素值反而更可控因为百分比会随着容器高度变化而变你精心调好的和旁边文字的间距就飘了。一个很实用的习惯先确定我要留多少边距给标签。饼图是唯一一种标签画在图形外面的常用图表类型radius设得太大外面的标签就会被容器裁掉或者溢出。经验值是如果标签是单行短文字外半径控制在容器较短边的 60%~70%如果标签是两行、还带数值和百分比最好压到 55%~60%。剩下的空间才是留给 label 和 labelLine 的。环形图的内半径也值得说一说。内半径太小中间挖的洞不够看起来还是像个厚饼内半径太大环太细颜色块显得弱。我一般把内半径设成外半径的 55%~70%这个比例做出来的环视觉重量比较舒服。中间要放汇总数字的话内半径可以再大一点给文字留出足够的水平空间。// 环形图内外半径都用百分比跟随容器缩放 series: [{ type: pie, radius: [58%, 76%], // 内半径 58%外半径 76% center: [50%, 50%], startAngle: 90 }]2.2 容器塌陷、resize 失效与 pxtorem 不生效的真实原因这是我最想单独拎出来讲的一节因为几乎所有饼图显示不正常的问题根子都不在 ECharts 上而在容器上。容器塌陷ECharts 初始化时会去读取容器元素的clientWidth和clientHeight如果这两个值里有一个是 0它画出来的 canvas 就是 0 宽或 0 高页面上一片空白。最常见的触发场景有三个父元素用了height: 100%但祖先链上没有确定高度元素当时处于display: none比如被v-if控制、在未激活的 Tab 页里以及用 flex 布局时父容器没有给子项明确的尺寸约束。这三种情况的排查方式都一样——打开控制台看一眼容器元素的盒模型高度是不是 0。// 容器必须有确定高度ECharts 不会替你撑开 .chart-box { width: 100%; height: 320px; /* 不要写 100%除非祖先链高度是确定的 */ }resize 失效窗口尺寸变了但图表没跟着变99% 是忘了监听。window.addEventListener(resize, () chart.resize())是最基础的写法但它有两个毛病一是只监听窗口容器自身因为布局变化比如侧边栏折叠、兄弟元素显隐而改变宽度时不会触发二是高频触发会掉帧需要加节流。更现代的做法是用ResizeObserver直接盯着容器元素const box document.getElementById(chart) const chart echarts.init(box) let timer null const ro new ResizeObserver(() { clearTimeout(timer) timer setTimeout(() chart.resize(), 80) // 简单防抖 }) ro.observe(box)组件销毁时记得ro.disconnect()和chart.dispose()不然在单页应用里反复进出这个页面会累积一堆监听器和 canvas。pxtorem 对 ECharts 不起作用这个问题被问得特别多。postcss-pxtorem这类插件的工作原理是扫描CSS 文件里的 px 值并替换成 rem它看不见 JavaScript 里写的数字。而 ECharts 的fontSize: 12、itemWidth: 25这些值全都是 JS 对象里的数字在 canvas 上绘制完全不经过 CSS 的转换流程。所以你把fontSize写成1rem也没用——ECharts 的字号只接受数字传字符串会解析失败退回到默认值。正确做法是自己在 JS 里算一个基准值并且随容器宽度更新。这就是图文自适应的常见套路function getBaseFont(chartWidth) { // 以 375px 设计稿为基准最小不低于 10最大不超过 16 const size (chartWidth / 375) * 12 return Math.min(16, Math.max(10, size)) } // 每次 resize 时重新计算并 setOption function render(chart, data, width) { const fs getBaseFont(width) chart.setOption({ series: [{ type: pie, radius: [58%, 76%], label: { fontSize: fs, lineHeight: fs 4 }, labelLine: { length: fs * 1.2, length2: fs * 1.2 } }] }) }关键点是字号、引导线长度、图例项尺寸这些跟文字走的参数应该一起缩放只缩字号不缩引导线小屏幕上引导线会显得特别长很突兀。2.3 环形图宽度与多个饼图并排时的尺寸协调一个页面里放两个饼图做对比是很常见的需求也很容易做丑。最常见的问题是两个饼图大小不一致——明明用的是同样的radius百分比为什么一个看起来大一个看起来小因为百分比参照的是各自容器的较短边两个容器的高度如果不一样出来的直径就不一样。解决办法有两个给两个容器写死同样的高度或者干脆把radius写成像素值明确指定直径。并排时还有个细节是center。默认center是容器正中但如果你在饼图旁边不是上方放了图例就得把center往反方向挪否则饼图和图例互相挤。比如图例放在右侧 16px 处那center的 x 可以设成[42%, 52%]之类的值让饼图整体左移一点。这种微调没有什么公式就是打开页面看着改但你要知道该改哪个字段。多饼图共存还有一点如果它们共享一个 tooltip 或共享图例建议把series.name区分清楚图例的formatter也要跟着处理不然两个系列的图例项混在一起用户根本分不清哪个是哪个。3. 图例位置与样式把 legend 摆到该摆的地方3.1 legend 定位的坐标系与 orient 的联动legend的位置由left、top、right、bottom四个属性控制这几个属性既接受left、center、right、top、middle、bottom这样的关键字也接受百分比和像素值。默认情况下图例在容器顶部居中显示横向排列。这里有个特别容易搞混的点left: center和left: 50%不是一回事。写center是水平居中的语义ECharts 内部会按图例自身宽度计算偏移写50%是把图例的左边缘放到容器宽度的 50% 处结果会偏右一半宽度。很多人调图例位置怎么调都对不齐就是因为混用了这两种写法。我的习惯是能用关键字就用关键字需要精确偏移时用right: 16或bottom: 8这种从边缘起算的数值最不容易错。orient决定图例是横排还是竖排和位置强相关位置推荐 orient说明顶部居中horizontal默认组合图例项少时最省空间底部居中horizontal适合标题在上、图例在下的版式右侧贴边vertical项数多时首选几乎不侵占饼图空间左侧贴边vertical适合右侧有说明文字的布局右侧竖排是我在后台系统里用得最多的一种。它的好处是图例和饼图的边界非常清晰图例项数量从 3 个到 15 个都不会打架只要把type设成scroll就能自动出现翻页按钮。legend: { type: scroll, orient: vertical, right: 16, top: middle, // 垂直居中 itemWidth: 10, itemHeight: 10, itemGap: 12, icon: circle }3.2 图例项过多时的滚动与多列排布饼图的图例一旦超过 10 项问题就来了。横向排布会换行换行之后图例区域变高把饼图往下挤纵向排布在容器不够高的时候会被裁掉。这两种情况都需要处理。设置type: scroll之后ECharts 会给图例加翻页按钮超出部分隐藏点击翻页查看。这个方案适合项数不确定的场景但我个人不太喜欢——翻页按钮的存在会让用户意识到这里有内容被藏起来了在数据看板上容易引起误解。另一个思路是主动控制图例的显示方式做多列纵向排布。ECharts 没有直接的列数配置但可以利用legend在不同容器高度下自动换行的特性把图例放在容器下方给足宽度设orient: horizontal和较小的itemGap它会自动折成两行或三行。用grid是不行的饼图不吃grid位置还是靠center手动让位。还有一种更彻底的做法如果图例项特别多比如超过 20 个饼图本身就已经不适合了应该考虑换成横向条形图。这不是配置能解决的问题是图表选型的问题。我见过把 30 个类别的数据硬塞进一个饼图里最后图例占了大半屏扇形小得像纸屑用户根本读不出信息。图例文字太长也是个典型问题。类目名带前缀或后缀比如华东区-直营网点-上海图例会被撑得很宽。这时候可以用formatter截断legend: { formatter: (name) name.length 10 ? ${name.slice(0, 10)}… : name }但要注意formatter截断只影响图例显示tooltip 里的名称还是完整的用户点开还能看到全名体验上是可接受的。如果业务上不允许截断那就得换成右侧竖排加滚动把空间换出来。3.3 图例图标、文字与间距的细节调优图例的视觉细节里我改得最多的三个是icon、itemWidth/itemHeight和itemGap。icon的默认值是一个圆角矩形色块。饼图的图例我更推荐换成circle因为扇形本身就是弧形圆形图标的视觉语言更统一。可选值还有rect、roundRect、triangle、diamond、pin、arrow等等一般circle和roundRect够用了。如果想要更细的控制icon还接受 SVG 路径字符串可以画一个自定义形状。itemWidth和itemHeight默认是 25 和 14这个尺寸在常规字号下是协调的但当你的图表整体变小比如手机端或者变大比如大屏就一定要跟着调。我通常的算法是让图标高度接近字号的 0.85 倍左右比如fontSize: 12时itemHeight: 10、itemWidth: 10做出来是个小圆点比默认的扁矩形更精致。itemGap控制图例项之间的间距默认 10。纵向排布时我一般加到 12~16让每一项之间有呼吸感横向排布时保持在 10~12太大会导致换行过早。文字样式写在legend.textStyle里legend: { icon: circle, itemWidth: 10, itemHeight: 10, itemGap: 14, textStyle: { color: #5b6472, fontSize: 12, lineHeight: 18, padding: [0, 0, 0, 4] // 图标与文字之间的额外间距 } }注意legend.textStyle在 ECharts 5 里仍然是这个字段名但有些旧教程会写legend.textStyle以外的变体比如把颜色写到legend.textStyle.color之外的地方那是不生效的。碰到改了没反应的情况先确认字段名和层级对不对。还有一个小技巧legend.inactiveColor可以设置图例被点击取消选中后的颜色默认是灰色。在做只看某一类的交互时把这个值调成和背景接近的浅灰视觉上更干净。4. 指示线与标签文字饼图颜值的分水岭4.1 label 的位置选择与 formatter 富文本series.label是饼图里配置项最多的一个对象也是最影响最终效果的地方。第一件事是选positionoutside默认值标签在扇形外面配合引导线使用。适合项数不多的场景。inside标签在扇形内部不显示引导线。适合占比差异大、且扇形本身够大的场景。center所有标签都堆在圆心。这个值听起来奇怪但做环形图时非常有用——配合emphasis可以做出高亮某项时圆心显示该项数值的效果。判断标准很简单扇形的弧长够不够放下一行字。占比低于 5% 的扇形inside的标签一定会溢出或被裁掉这种数据就该走outside。formatter决定标签显示什么。支持字符串模板和回调函数两种形式。字符串模板里的占位符有{a}系列名、{b}数据项名、{c}数值、{d}百分比。简单场景够用label: { formatter: {b}\n{d}% }但真实业务里往往要更复杂——比如百分比小于 1% 时不显示数值只显示名称或者给数值加单位。这时候必须用函数label: { formatter: (p) { const pct p.percent.toFixed(1) return pct 1 ? {name|${p.name}} : {name|${p.name}}\n{val|${pct}%} }, rich: { name: { color: #3d4451, fontSize: 12, lineHeight: 18 }, val: { color: #8a93a3, fontSize: 11, lineHeight: 16 } } }rich是我认为饼图配置里性价比最高的一个功能。它允许你在同一个 label 里用{styleName|内容}的语法给不同部分套不同样式——不同颜色、不同字号、甚至加背景色和圆角。两行标签第一行名称、第二行数值能用它做出很清晰的层次比单纯用\n换行好看太多。用rich时有两个坑要注意。第一rich里的lineHeight一定要显式设置否则多行文本的行距会按字号自动推算往往偏挤。第二rich里设置了height的片段比如用来做背景色块的它的垂直位置由行高决定容易出现上下不居中的情况用padding微调最稳。4.2 labelLine 长度、折角与末端小圆点偏移的处理引导线由labelLine控制主要字段就三个length靠近扇形的那一段、length2靠近文字的那一段、smooth折角的圆滑程度0 到 1 之间越大越圆。调整长度的时候有个原则length和length2的比值决定了引导线的形状感。两段一样长的时候引导线是标准的两段折线像工厂里那种折角标签length短、length2长的时候引导线几乎是水平伸出去的适合文字特别长的场景。我一般按length: 12、length2: 16起步调。smooth建议给一个 0.3 到 0.6 之间的值。默认的直角折线在视觉上有点硬稍微圆滑一点会让整个图看起来更柔和尤其是标签比较多的时候一堆直角折线叠在一起会很乱。真正麻烦的是引导线末端的小圆点。ECharts 的labelLine本身不提供在末端画圆点的配置网上很多实现都是绕道做的在 label 文本最前面加一个圆点字符或者用rich画一个小方块视觉上这个圆点就出现在引导线的末端。label: { formatter: (p) {dot|}{name|${p.name}} {val|${p.value}}, rich: { dot: { width: 6, height: 6, borderRadius: 3, backgroundColor: #4a90e2, padding: [0, 6, 0, 0] }, name: { fontSize: 12, lineHeight: 18, color: #3d4451 }, val: { fontSize: 12, lineHeight: 18, color: #8a93a3 } } }这个圆点最常见的毛病就是上下偏移——圆点比文字高一点或者低一点看起来像没对齐。根因在于rich里设置了height的片段它占据的是一块独立的盒子ECharts 在行内布局时会以这一行里的最大高度为基准做对齐圆点的 6px 盒子和文字 18px 的行高差了一截位置自然就飘了。处理方法有两个看你的具体版本表现来决定把圆点的height设成和同行文字lineHeight一致比如都是 18再用borderRadius保证是圆——但这样圆点会变成直径 18 的大点需要配合width也设 18、然后靠padding收敛。这个做法比较绕。更省事的做法是保持圆点小尺寸然后用padding的上下值微调。上下各试 1px、2px很快就能对齐。这个方法的好处是可控坏处是要在目标浏览器和 ECharts 版本上实际看一眼。我个人的经验是圆点直径取 6px、文字行高取 18px 时给dot加padding: [6, 6, 0, 0]这种上边距在多数版本里能对上。如果项目里组件库会升级 ECharts 版本建议把这个对齐逻辑封装成一个变量升级后集中调一次而不是散落在几十个图表配置里。如果你想要的是引导线起点带圆点的效果也就是贴着扇形那头的端点那个其实是可以用itemStyle.borderWidth配合borderColor做出类似视觉的或者干脆接受没有圆点的默认样式。别在这上面耗太久这类装饰性细节的收益远不如把标签内容的层次理清楚。4.3 标签重叠、引导线穿越与极值数据的处理标签重叠是饼图最常见的视觉问题触发条件基本就是三个数据项太多、占比差异太大、容器太小。处理顺序应该是从数据侧往样式侧走。数据侧能做的是合并小项。占比低于 2% 的类目在饼图上本来就读不出来把它们合并成一个其他既解决重叠又提升可读性。这是我做过的最有效的一招比任何配置都管用。样式侧的第一道防线是minAngle。它的作用是给每个扇形一个最小角度避免极小占比的扇形变成一条线。设成 3 到 5 度比较合适但要注意它会让百分比显示和实际角度不一致——扇形看起来比 3% 大标签却写着 3%。如果业务上对这个敏感就得在 tooltip 里说明或者干脆用合并小项的方式。第二道防线是 ECharts 5 提供的labelLayoutlabelLayout: { hideOverlap: true // 重叠的标签自动隐藏 }这个配置很好用代价是被隐藏的标签信息就看不到了。我的用法是把它和 tooltip 结合起来——标签藏了没关系鼠标悬浮扇形还能看到完整信息。这样在保证画面干净的同时不丢信息。引导线穿越是另一个容易被忽略的问题。当某个扇形的标签被推到对面去的时候引导线会横穿整个饼图看起来非常乱。这个现象在avoidLabelOverlap: true的时候特别容易出现。缓解办法是把avoidLabelOverlap关掉配合labelLayout.hideOverlap让重复的标签直接隐藏而不是满世界挪。实测下来这个组合在项数 8 到 15 的场景里表现最稳。5. tooltip 换行、高亮与一整份可直接复制的配置5.1 tooltip 自动换行的两种可靠做法饼图的 tooltip 触发方式是trigger: item作用在单个扇形上。内容格式用formatter控制字符串模板{b}: {c} ({d}%)对付简单场景足够。真正让人头疼的是长文本换行。默认的 tooltip 容器是white-space: nowrap也就是说不管你的文字多长它都会倔强地排成一行横向撑出去在小屏幕上直接溢出到屏幕外。两种可靠的解法第一种是改textStyle这是最原生的做法tooltip: { trigger: item, textStyle: { width: 200, // 限制容器宽度 overflow: break, // 超出部分换行truncate 是截断 lineHeight: 18 } }第二种是加extraCssText直接注入 CSStooltip: { trigger: item, confine: true, // 限制在容器内不跑出图表区域 extraCssText: max-width: 260px; white-space: normal; word-break: break-all; }两种我都用过效果都稳定。区别在于extraCssText是纯 CSS浏览器兼容性更可控textStyle.overflow是 ECharts 自己实现的跟版本有关。如果你要处理的是中英文混排的长类目名我建议两个一起上——textStyle控宽度和行高extraCssText加word-break防止长英文单词撑破容器。另外confine: true这个配置值得单独提一下。默认情况下 tooltip 会跟随鼠标靠近容器边缘时会跑出图表区域甚至盖住旁边的组件。加上confine之后它会被限制在容器内部在栅格化布局里能让整个页面的层级关系清爽很多。5.2 高亮态、选中态与点击联动饼图的高亮emphasis默认会把扇形的亮度提一点同时标签加粗。这个默认效果比较克制实际项目里我一般会加强一些emphasis: { scale: true, // 高亮时扇形轻微放大 scaleSize: 6, // 放大 6px itemStyle: { shadowBlur: 12, shadowColor: rgba(0, 0, 0, 0.18) }, label: { fontWeight: bold } }scale配合scaleSize做出的弹出效果在点击交互里特别有用。用户点某个扇形时它微微凸出来交互反馈非常明确。注意scaleSize的单位是像素不要设太大3 到 8 之间比较自然超过 10 会显得很浮夸。选中态可以用selectedMode来做。饼图支持selectedMode: single和multiple开启后点击扇形会切换选中状态选中项默认会偏移出去selectedOffset控制偏移距离默认 10px。这个特性适合做只看某一类的筛选场景比如点击某个区域的扇形右侧的明细列表跟着刷新。series: [{ type: pie, selectedMode: single, selectedOffset: 8, // ... }]配合chart.on(click, ...)拿到点击项就能做联动chart.on(click, (params) { if (params.componentType ! series) return fetchDetail({ name: params.name, value: params.value }) })这里有个细节要留意如果你用selectedMode点击时扇形会有一个弹出的动画而selectedOffset影响的是位置偏移视觉上会和emphasis.scale叠加。两个都用的话看起来会弹得比较夸张。一般选一个就好我个人更倾向emphasis.scale因为它只在悬浮时生效不会改变图表的静态布局。5.3 一份可以直接抄的完整配置与上线前自检清单把前面所有内容整合起来这是一个我实际项目里用的环形图配置模板右侧竖排图例、圆心预留数值位、标签用富文本做两行、tooltip 限宽换行option { tooltip: { trigger: item, confine: true, extraCssText: max-width: 260px; white-space: normal; word-break: break-all;, formatter: (p) ${p.name}br/数量${p.value}br/占比${p.percent.toFixed(1)}% }, legend: { type: scroll, orient: vertical, right: 12, top: middle, icon: circle, itemWidth: 10, itemHeight: 10, itemGap: 14, textStyle: { color: #5b6472, fontSize: 12, lineHeight: 18 }, formatter: (name) name.length 10 ? ${name.slice(0, 10)}… : name }, series: [{ name: 设备类型, type: pie, radius: [56%, 74%], center: [36%, 52%], startAngle: 90, minAngle: 4, avoidLabelOverlap: false, itemStyle: { borderColor: #fff, borderWidth: 2, borderRadius: 4 }, label: { show: true, position: outside, formatter: (p) {dot|}{name|${p.name}} {val|${p.percent.toFixed(1)}%}, rich: { dot: { width: 6, height: 6, borderRadius: 3, backgroundColor: #4a90e2, padding: [6, 6, 0, 0] }, name: { fontSize: 12, lineHeight: 18, color: #3d4451 }, val: { fontSize: 12, lineHeight: 18, color: #8a93a3 } } }, labelLine: { length: 12, length2: 16, smooth: 0.4, lineStyle: { color: #c9d0da, width: 1 } }, labelLayout: { hideOverlap: true }, emphasis: { scale: true, scaleSize: 6, itemStyle: { shadowBlur: 12, shadowColor: rgba(0,0,0,0.16) } } }] }上线前我会过一遍这几个检查项基本能拦住九成问题检查项怎么查出问题的表现容器高度控制台看盒模型图表完全空白resize 监听拖动窗口看是否跟随图表被拉伸变形字号缩放手机模拟器上看小屏文字挤在一起标签溢出缩小容器宽度标签被裁切图例遮挡项数拉到最大图例压住饼图tooltip 宽度用最长的类目名测浮层横穿出屏幕销毁清理反复进出页面内存持续增长提示itemStyle.borderRadius需要 ECharts 5.0 及以上版本labelLayout同样是 5.0 引入的。如果你的项目还锁在 4.x这两个配置是不生效的升级前先用itemStyle.borderWidth加白色描边来做出分隔感。最后说一个我自己踩过的坑。有一次在一个移动端页面里饼图怎么调都在右侧留着一大块空白我改了半小时center都没对。最后发现是容器的padding-right是某个全局样式带进来的饼图的百分比是相对内容区算的外墙被 padding 占了。所以当你觉得怎么调都不对的时候先别改 ECharts 的配置打开控制台把容器的盒模型和继承来的样式看清楚往往问题根本不在图表这一层。