ECharts 的 roseType: 'area' 玫瑰图需设 radius 为数组（如['10%','80%']）且 innerRadius ≠ 0，使扇形面积严格正比于数值；须过滤负数/0值，监听 resize 并防抖，避免 label 重叠及渲染异常。

直接用 ECharts 的 pie 系列 + roseType: 'area' 就能做出符合数据语义的南丁格尔玫瑰图，不用自己算极坐标、也不必引入 d3.js —— 但必须设对 radius 和 innerRadius，否则面积不正比于数值，就不是真正的玫瑰图。

echarts pie roseType: 'area' 怎么配才对

关键不是“开了 roseType”，而是让扇形面积严格 ∝ 数据值。ECharts 在 roseType: 'area' 模式下，默认按角度均分（即每个扇形 θ 相同），此时面积 ∝ R² − r²。所以必须：

• 显式设置 radius 为数组，如 ['10%', '80%']，让内半径和外半径都有意义
• 确保 innerRadius 不是 0（否则退化为 roseType: 'radius' 行为）
• 避免用 center 偏移太多，否则扇形视觉挤压变形，尤其在小屏仪表盘上
• 如果数据量大（>12 项），要关掉 label 或改用 emphasis 高亮，否则文字重叠不可读

仪表盘里嵌入时宽高和响应式怎么处理

HTML 仪表盘常有固定容器（比如 div class="chart-card"），但 ECharts 默认不自动适配父容器缩放。常见翻车点：

• init 时没传 { renderer: 'canvas' }，导致高清屏模糊（尤其是大屏看板）
• 没监听 window.resize，切换浏览器窗口或横竖屏后图表错位
• 用百分比宽高（style="width:100%;height:300px"）但父容器没设 position: relative，导致 echarts.init() 计算宽高为 0
• 在 Vue/React 项目中直接挂载到未渲染完的 DOM 节点，document.getElementById 返回 null

实操建议：初始化后立刻调用 myChart.resize()，并在 addEventListener('resize', ...) 里加防抖（300ms 即可）。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

立即学习“前端免费学习笔记（深入）”；

data 中 value 为 0 或负数会怎样

ECharts 的 roseType: 'area' 对 0 值容忍度低，会出现扇形塌陷、角度计算异常甚至白屏。负数则直接报错：Invalid value for radius。

• 务必在传入 option.series[0].data 前过滤或转为绝对值（根据业务含义判断是否合理）
• 若需保留 0 值语义（如“无数据”），建议用 NaN 替代，并配合 silent: true 和自定义 tooltip.formatter 说明
• 别依赖 minRadius 参数兜底——它只控制最小显示半径，不解决数学映射失效问题

最易被忽略的是：roseType 图表的视觉权重远高于普通饼图，放在仪表盘里容易喧宾夺主。建议搭配 legend.orient: 'vertical' + right: 10 把图例抽到右侧，留出中央区域给核心指标数字卡片。