echarts修改legend图例标记样式

ECharts提供了多种设置图例样式的方式，可以通过以下属性来设置图例样式： 1. textStyle: 设置图例文本的样式，包括颜色、字号、字体等。 2. itemWidth: 设置图例标记的宽度。 3. itemHeight: 设置图例标记的高度。 4. borderColor: 设置图例边框的颜色。 5. borderWidth: 设置图例边框的宽度。 6. borderRadius: 设置图例边框的圆角半径。 7. backgroundColor: 设置图例的背景色。 8. padding: 设置图例内边距。 以下是一个设置图例样式的示例代码： ```javascript option = { // 设置图例组件 legend: { textStyle: { color: '#333', fontSize: 14 }, itemWidth: 20, itemHeight: 14, borderColor: '#ccc', borderWidth: 1, borderRadius: 5, backgroundColor: '#fff', padding: [10, 20] }, // 其他配置项... // ... }; ``` 以上代码设置了图例文本颜色为`#333`，字号为`14`，标记宽度为`20`，标记高度为`14`，边框颜色为`#ccc`，边框宽度为`1`，边框圆角半径为`5`，背景色为`#fff`，内边距为`[10, 20]`。

### 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); ```