echarts修改legend的字体颜色

### 如何在 ECharts 中设置 Legend 字体颜色 #### 使用 `textStyle` 属性全局修改字体颜色 为了统一调整整个图例的文字颜色，在配置项中找到 `legend` 组件并添加 `textStyle` 对象来定义所需的样式属性。通过这种方式可以轻松改变所有图例外观的一致性。 ```javascript option = { legend: { textStyle: { color: '#ff0000' // 设置红色作为默认文字颜色 } }, }; ``` #### 让 Legend 文本颜色跟随系列数据变化 如果希望每个图例项的颜色与其对应的序列相匹配，则可以在 `textStyle.color` 下指定一个数组，该数组内的每一项应按照顺序对应于各组数据的颜色值。 ```javascript option = { legend: { orient: 'vertical', left: 'right', top: 'center', textStyle: { color: ['#c23531','#2f4554', '#61a0a8'] // 各个类别不同的颜色列表 }, data:['类目一','类目二','类目三'] }, series : [ {name:'类目一', type:'bar'}, {name:'类目二', type:'line'}, {name:'类目三', type:'pie'} ] }; ``` #### 利用 Rich Text 实现更复杂的样式定制 对于更加精细控制的需求，比如让部分关键词高亮显示或是应用多种风格组合时，可借助 rich text 功能实现复杂格式化效果。首先声明一组预设样式规则，之后利用 formatter 函数动态拼接带样式的字符串片段完成最终呈现。 ```javascript option = { legend: { formatter: function (name) { var styleName; switch (name){ case "类目一": styleName = "{styleRed|" + name + "}"; break; default: styleName = "{default|" + name + "}"; }; return styleName; }, textStyle:{ rich: { styleRed: { color: "#FF0000", fontSize: 18, fontWeight: 'bold' }, default: {} } } } } ```