设置echarts 图例为长方形

张开发
• 2026/4/10 1:12:04 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

设置echarts 图例为长方形
在 ECharts 中要将图例legend的标记icon设置为长方形矩形可以通过legend配置项中的icon属性来实现。✅ 方法使用icon: rectECharts 内置了多种图例标记样式其中rect表示矩形长方形。 配置方式option{legend:{icon:rect,// 所有图例项都使用矩形图标// 其他位置配置...},series:[{name:销量,type:line,data:[...]},{name:库存,type:line,data:[...]}]} 效果说明默认图例图标是圆形circle设置icon: rect后所有图例前的标记会变成小矩形长方形矩形尺寸由 ECharts 自动控制通常宽高比约为 2:1横向长方形✅ 进阶为不同系列设置不同图标可选如果你只想对特定系列使用矩形可通过series中的legendIcon但注意ECharts 官方不支持 per-series 的 legend icon。因此统一设置legend.icon是唯一可靠方式。⚠️ 注意legend.data中不能单独指定 icon必须全局设置。️ 其他内置 icon 类型参考值说明circle圆形默认rect矩形长方形✅roundRect圆角矩形triangle三角形diamond菱形pin水滴形arrow箭头none不显示图标 示例完整代码option{legend:{left:left,top:top,icon:rect// ← 关键配置},xAxis:{type:category,data:[A,B,C]},yAxis:{type:value},series:[{name:销量,type:line,data:[10,20,30]},{name:库存,type:line,data:[15,25,35]}]};这样你的 ECharts 图例就会显示为长方形标记符合你的需求。

更多文章