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不显示图标
### ECharts 自定义 Legend 样式方法及配置选项 在 ECharts 中,`legend` 是用于显示图表中各个系列名称及其对应关系的重要组件。通过自定义 `legend` 的样式,可以提升图表的可读性和美观度。 #### 基本配置项 ECharts 提供了丰富的配置项来调整图例的外观和行为。以下是常见的几个配置项: - **icon**: 定义图例标记的图形,默认为 `'circle'` 或其他内置形状(如 `'rect'`, `'roundRect'`, `'triangle'` 等),也可以设置为图片路径或 SVG 路径字符串[^1]。 ```javascript legend: { icon: 'path://M487 ...', // 使用自定义图标 } ``` - **orient**: 设置图例的方向,支持 `'horizontal'` 和 `'vertical'`[^2]。 ```javascript legend: { orient: 'vertical', } ``` - **left/right/top/bottom**: 控制图例的位置,可以通过像素值或百分比指定其相对于容器边缘的距离[^3]。 ```javascript legend: { left: 'center', // 居中对齐 top: 'top', // 靠上放置 } ``` - **itemGap**: 图例每项之间的间隔距离,默认为 10px。 ```javascript legend: { itemGap: 20, // 增大间距 } ``` - **itemWidth/itemHeight**: 单独控制图例标记的宽度和高度。 ```javascript legend: { itemWidth: 25, itemHeight: 14, } ``` - **textStyle**: 修改图例文字的颜色、字体大小和其他样式属性。 ```javascript legend: { textStyle: { color: '#fff', // 文字颜色 fontSize: 16 // 字体大小 }, } ``` #### 进阶定制化 如果需要更复杂的自定义效果,还可以利用以下高级功能: - **formatter**: 动态修改图例的文字内容。 ```javascript legend: { formatter: function (name) { return name + '(单位)'; } } ``` - **selected**: 初始状态下某些图例是否被选中[^4]。 ```javascript legend: { selected: { 'Series A': false, // 默认不展示 Series A 数据 }, } ``` - **data**: 明确指定图例的数据源以及对应的顺序。 ```javascript legend: { data: ['Category A', 'Category B'], } ``` #### 实际案例代码示例 下面是一个完整的例子,展示了如何综合运用上述配置来自定义 `legend` 样式: ```javascript var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { legend: { orient: 'vertical', // 垂直排列 left: 'right', // 放置在右侧 top: 'middle', // 对齐中间 itemGap: 15, // 加大项目间距离 itemWidth: 20, // 更宽的标志 itemHeight: 12, // 更高的标志 textStyle: { // 自定义文字样式 color: '#ffffff', // 白色文字 fontSize: 14 // 大号字体 }, icon: 'path://M400... ', // 自定义SVG路径作为图标 formatter: '{name} ({value})',// 添加额外信息到图例名 selected: { // 初始化部分未激活状态 'Data Set C': false }, data: ['Data Set A', 'Data Set B', 'Data Set C'] }, series: [ { name: 'Data Set A', type: 'bar', data: [120, 200, 150], }, { name: 'Data Set B', type: 'line', data: [90, 180, 120], }, { name: 'Data Set C', type: 'pie', radius: '50%', data: [{ value: 70 }, { value: 30 }], } ] }; myChart.setOption(option); ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值