echarts legend 字体样式

### 如何自定义 ECharts 图例（Legend）图标样式 在 ECharts 中，可以通过配置 `legend` 的属性来自定义图例的样式。以下是详细的说明： #### 自定义 Legend Icon 样式 ECharts 提供了多种方式来设置图例中的图标样式。通过调整 `icon` 属性，可以指定不同的形状或者图片作为图例项的标志。 - **内置图形支持** 可以直接使用字符串形式指定一些预设的几何形状，例如 `'circle'`, `'rect'`, `'roundRect'`, `'triangle'`, `'diamond'`, `'pin'`, `'arrow'` 等[^1]。 ```javascript legend: { data: ['审批完成', '待审批', '驳回'], icon: 'circle', itemWidth: 20, itemHeight: 20 } ``` - **自定义路径 (SVG Path)** 如果需要更复杂的图标，可以直接传入 SVG 路径数据作为 `icon` 值。这允许开发者创建任意复杂度的矢量图形作为图例标记。 ```javascript legend: { data: ['审批完成', '待审批', '驳回'], icon: 'path://M879.4...Z',// 替换为实际的SVG path数据 itemWidth: 25, itemHeight: 25 } ``` - **外部图像支持** 使用 `"image://url"` 的格式引入一张网络上的图片资源作为图例项的图标[^2]。这种方式非常适合展示品牌 Logo 或者其他特定图案的情况。 ```javascript var iconUrl = 'https://example.com/icon.png'; legend: { data: ['审批完成', '待审批', '驳回'], icon: ('image://' + iconUrl), itemWidth: 30, itemHeight: 30 } ``` #### 进一步优化 Legend 显示效果 除了更改图标外，还可以调节其它参数让整个图例区域更加美观实用： - 设置每项宽度高度 (`itemWidth`, `itemHeight`) 来匹配新设计的比例； - 修改文字颜色字体大小等细节提升可读性和一致性； - 利用 padding 和 alignment 控制布局位置关系保持整体协调统一。 以上就是关于如何利用 echarts 实现个性化定制化 legends icons 的全部内容介绍啦！ ```javascript var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { title: { text: '示例' }, tooltip: {}, legend: { orient: 'vertical', left: 'left', data:['审批完成','待审批','驳回'], textStyle:{ color:'#fff' }, selectedMode : false , icon:'path://M879...',// 更改为你自己的svg path或image url itemGap:10,//间距 itemWidth:25, itemHeight:25 }, series:[ ... ] }; myChart.setOption(option); ```

### 设置 ECharts 图例 Legend 字体大小 为了调整 ECharts 中图例项的文字样式，可以在 `legend` 配置项内嵌入 `textStyle` 属性来指定字体大小以及其他文本属性。具体来说，在定义图例外观时通过添加 `textStyle` 对象并设置其中的 `fontSize` 参数即可改变默认字型尺寸[^2]。 以下是用于设定 ECharts 图例文字大小的具体实现方法： ```javascript option = { legend: { textStyle: { fontSize: 18 // 设定字体大小为18px }, data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, series: [ ... ] }; ``` 此段代码展示了如何利用 `textStyle.fontSize` 来控制显示于页面上的图例标签字号。除了可以自定义字体大小外，还可以进一步定制其他样式选项，比如颜色、粗细等，只需相应地扩展 `textStyle` 下的内容即可满足更多个性化需求[^3]。