echarts修改legend样式(正方形、矩形、圆形等等)

博客介绍了Echarts相关内容,提及了正方形及其他自带形状,其中正方形显示长宽为24。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

正方形

legend: {
          itemHeight: 24,
          itemWidth: 24,
          data: [
            {
              name: '修边比例',
              icon: 'rect',
            },
            {
              name: '平均门幅',
              icon: 'rect',
            }
          ]
        },

以上显示长宽为24的正方形。

其他自带形状

icon展示
circle圆形
rect矩形
roundRect圆角矩形
triangle三角形
diamond菱形
pin水滴
arrow箭头
none不显示图标
### Legend 图标使用方法 #### ECharts 中的 Legend 图标自定义 ECharts 提供了丰富的选项来自定义 `legend` 的图标样式。可以通过设置 `icon` 属性来指定图标的形状或加载外部图片作为图标。 以下是支持的内置图标样式列表[^3]: - 圆形:`circle` - 正方形:`rect` - 折线:`line` - 圆角矩形:`roundRect` - 三角形:`triangle` - 菱形:`diamond` - 针状图形:`pin` - 箭头:`arrow` - 无图标:`none` 如果需要更复杂的图标,可以使用外部图片替代默认图标。通过将 `icon` 设置为 `"image://<图片路径>"` 来实现这一功能[^1]。例如: ```javascript option = { legend: { data: ['Series A'], icon: 'image://https://example.com/path/to/image.png' }, series: [{ name: 'Series A', type: 'bar', data: [120, 200, 150, 80, 70] }] }; ``` 上述代码展示了如何将 `legend` 图标替换为一张网络图片。 --- #### MATLAB 中的 Legend 图标调整 在 MATLAB 中,可以直接访问 `legend` 对象并修改其子对象的属性以改变图标大小或其他特性[^2]。以下是一个完整的例子展示如何动态调整 `scatter` 绘制后的 `legend` 图标大小: ```matlab figure; x = 0:pi/20:2*pi; y1 = sin(x); y2 = cos(x); % 创建散点图 scatter(x, y1, '*', 'DisplayName', 'Sine'); hold on; scatter(x, y2, 'h', 'DisplayName', 'Cosine'); % 添加 legend 并获取句柄 [temp, lgd] = legend('show', 'Location', 'east'); % 修改特定图标的 MarkerSize lgd(3).Children.MarkerSize = 12; % Sine 图标的大小 lgd(4).Children.MarkerSize = 12; % Cosine 图标的大小 ``` 此代码片段演示了如何定位到具体的 `legend` 子项并通过更改 `MarkerSize` 实现图标尺寸调整。 --- #### 下载资源注意事项 无论是 ECharts 还是 MATLAB,均无需额外下载任何插件即可完成以上操作。对于 ECharts,只需确保项目中有合法的图片 URL 即可正常使用 `image://` 功能。而对于 MATLAB,则需确认所使用的版本(如 2021a 及更高版本)支持这些高级定制化功能。 ---
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值