19. 标题与图例Title Legend1. 概述标题Title和图例Legend是 ECharts 中最基础但也最重要的组件。标题用于说明图表的主题和内容图例用于标识不同系列的数据类别。合理配置标题和图例可以大大提升图表的可读性和专业性。┌─────────────────────────────────────────────────────────────┐ │ 标题与图例体系 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 标题组件Title │ │ ├── 主标题主要说明 │ │ ├── 副标题补充说明 │ │ ├── 位置样式对齐、边距、字体 │ │ ├── 链接支持可点击跳转 │ │ └── 边框背景边框、背景色、阴影 │ │ │ │ 图例组件Legend │ │ ├── 基础图例显示系列名称 │ │ ├── 滚动图例支持滚动翻页 │ │ ├── 分页图例页码切换 │ │ ├── 自定义样式布局、图标、字体 │ │ └── 交互控制点击筛选系列 │ │ │ │ 高级功能 │ │ ├── 图例格式化格式化标签 │ │ ├── 富文本支持多样式混排 │ │ └── 事件交互监听点击事件 │ │ │ └─────────────────────────────────────────────────────────────┘2. 标题组件Title2.1 基础标题配置最简单的标题配置包含主标题和副标题。// 基础标题constoption{title:{show:true,// 是否显示标题text:月度销售趋势,// 主标题subtext:2024年第一季度,// 副标题left:center,// 水平位置top:10,// 垂直位置// 主标题样式textStyle:{color:#333,fontSize:18,fontWeight:bold,fontFamily:Microsoft YaHei},// 副标题样式subtextStyle:{color:#aaa,fontSize:12}},series:[{type:line,data:[120,200,150,80,70,110,130]}]};2.2 标题位置与对齐灵活控制标题的位置和对齐方式。// 标题位置配置constoption{title:{text:产品销量分析,subtext:按地区统计,// 位置选项left:left,// left, center, right, 百分比, 像素top:top,// top, middle, bottom, 百分比, 像素// 水平对齐当 left 为像素时生效textAlign:left,// 垂直对齐textVerticalAlign:top,// 边距padding:[5,10,5,10],// 上右下左// 间距itemGap:10// 主副标题间距}};2.3 带链接的标题为标题添加超链接点击可跳转。// 可点击标题constoption{title:{text:访问官网,subtext:了解更多,// 链接配置link:https://echarts.apache.org,target:blank,// blank, self// 链接样式textStyle:{color:#5470c6,textShadow:0 0 5px rgba(84,112,198,0.5),textBorderColor:transparent,textBorderWidth:0},subtextLink:https://echarts.apache.org/zh/index.html,subtextTarget:blank,subtextStyle:{color:#91cc75}}};2.4 标题边框与背景添加边框和背景增强标题视觉效果。// 带边框背景的标题constoption{title:{text:季度报表,subtext:数据截止至2024年3月,left:left,top:20,// 背景色backgroundColor:rgba(84,112,198,0.1),// 边框borderColor:#5470c6,borderWidth:2,borderRadius:8,// 阴影shadowBlur:10,shadowColor:rgba(0,0,0,0.1),shadowOffsetX:0,shadowOffsetY:2,// 内边距padding:[10,20,10,20]}};2.5 富文本标题使用富文本实现多种样式混排。// 富文本标题constoption{title:{text:{title|销售数据} {unit|(万元)},subtext:{date|2024年} {trend|↑ 15%},textStyle:{fontSize:16,fontWeight:normal,rich:{title:{fontSize:22,fontWeight:bold,color:#5470c6},unit:{fontSize:12,color:#999,padding:[0,0,0,5]},date:{fontSize:14,color:#666},trend:{fontSize:14,color:#91cc75,padding:[0,0,0,10]}}},subtextStyle:{rich:{date:{color:#333},trend:{color:#ee6666}}}}};3. 图例组件Legend3.1 基础图例显示系列名称支持点击筛选。// 基础图例constoption{legend:{show:true,// 是否显示type:plain,// 普通图例// 图例数据自动从系列中获取data:[系列A,系列B,系列C],// 位置left:center,top:0,// 布局方向orient:horizontal,// horizontal, vertical// 图例间距itemWidth:25,// 图例标记宽度itemHeight:14,// 图例标记高度itemGap:20,// 图例间距// 文字样式textStyle:{color:#333,fontSize:12,fontWeight:normal}},series:[{name:系列A,type:line,data:[10,20,30]},{name:系列B,type:line,data:[15,25,35]},{name:系列C,type:line,data:[20,30,40]}]};3.2 滚动图例当图例过多时支持滚动翻页。// 滚动图例constoption{legend:{type:scroll,// 滚动图例// 滚动配置pageIconColor:#5470c6,pageIconInactiveColor:#aaa,pageIconSize:15,pageTextStyle:{color:#333,fontSize:12},// 滚动条位置pageFormatter:{current}/{total},// 图例列表data:[]// 自动从系列生成},series:[]// 假设有很多系列};3.3 图例位置样式灵活控制图例的位置和样式。// 图例位置样式constoption{legend:{show:true,// 位置右下角right:20,bottom:20,// 背景样式backgroundColor:rgba(255,255,255,0.8),borderColor:#ccc,borderWidth:1,borderRadius:5,padding:[10,15,10,15],// 阴影shadowBlur:5,shadowColor:rgba(0,0,0,0.1),// 图例样式itemStyle:{borderRadius:4,borderWidth:1,borderColor:#ddd},// 高亮样式emphasis:{itemStyle:{borderWidth:2,borderColor:#5470c6}}}};3.4 自定义图例图标使用内置图标或自定义图标。// 自定义图例图标constoption{legend:{data:[{name:圆点,icon:circle},{name:矩形,icon:rect},{name:圆角矩形,icon:roundRect},{name:三角形,icon:triangle},{name:菱形,icon:diamond},{name:大头针,icon:pin},{name:箭头,icon:arrow}],itemWidth:30,itemHeight:20,// 自定义图标图片formatter:function(name){returnname;}},series:[{name:圆点,type:line,data:[10,20,30],symbol:circle},{name:矩形,type:line,data:[15,25,35],symbol:rect}]};3.5 图例格式化自定义图例标签的显示格式。// 图例格式化constoption{legend:{formatter:function(name){// 根据系列名称返回不同格式if(name销售额){return${name}(万元);}elseif(name利润){return${name}(万元);}returnname;},// 或使用模板字符串// formatter: {name} (单位:万元)textStyle:{rich:{unit:{fontSize:10,color:#999}}}}};3.6 图例交互控制控制图例的交互行为。// 图例交互配置constoption{legend:{// 是否可点击selector:[{type:all,title:全部},{type:inverse,title:反选}],selectorLabel:{fontSize:12,color:#5470c6},// 图例选中状态selected:{系列A:true,系列B:false,系列C:true},// 图例组件不同状态selectedMode:multiple,// single, multiple// 工具箱按钮tooltip:{show:true}},series:[]};// 动态控制图例选中myChart.setOption({legend:{selected:{系列A:false// 隐藏系列A}}});4. 组合配置示例4.1 完整仪表板标题// 仪表板标题配置constoption{title:[{text:销售数据看板,left:center,top:5,textStyle:{fontSize:20,fontWeight:bold,color:#333}},{text:数据更新时间: 2024-03-15,left:center,top:40,textStyle:{fontSize:12,color:#999}}],legend:{right:20,top:20,backgroundColor:rgba(255,255,255,0.9),borderWidth:1,borderColor:#e0e0e0,borderRadius:8,padding:[10,15],itemGap:15,textStyle:{fontSize:11}},series:[{name:实际销售额,type:line,data:[120,135,148,162,175]},{name:目标销售额,type:line,data:[110,130,150,170,190]}]};4.2 带图例筛选的图表// 交互式图例筛选constoption{legend:{data:[产品A,产品B,产品C],left:left,itemWidth:20,itemHeight:12,backgroundColor:#f5f5f5,borderWidth:0,borderRadius:4,padding:[8,12]},series:[{name:产品A,type:line,data:[30,45,52,48,60],smooth:true},{name:产品B,type:line,data:[20,35,42,38,50],smooth:true},{name:产品C,type:line,data:[15,25,32,28,40],smooth:true}]};// 监听图例点击事件myChart.on(legendselectchanged,function(params){console.log(图例状态变化:,params);// 根据选中状态执行其他逻辑});5. 配置参数详解标题参数参数类型默认值说明showbooleantrue是否显示标题textstring‘’主标题文本linkstring‘’主标题链接targetstring‘blank’打开方式subtextstring‘’副标题文本leftstring|number‘auto’水平位置topstring|number‘auto’垂直位置backgroundColorstring‘transparent’背景色borderColorstring‘#ccc’边框颜色borderWidthnumber0边框宽度borderRadiusnumber|array0圆角半径paddingnumber|array5内边距itemGapnumber10主副标题间距图例参数参数类型默认值说明showbooleantrue是否显示图例typestring‘plain’图例类型plain/scrollleftstring|number‘center’水平位置topstring|number‘top’垂直位置orientstring‘horizontal’布局方向itemWidthnumber25图例标记宽度itemHeightnumber14图例标记高度itemGapnumber10图例间距selectedModestring‘multiple’选中模式backgroundColorstring‘transparent’背景色borderWidthnumber0边框宽度borderRadiusnumber|array0圆角半径paddingnumber|array5内边距6. 最佳实践✅ 标题最佳实践简洁明了标题应概括图表核心内容层次清晰主标题突出副标题补充位置合理避免遮挡图表主体使用链接适当添加参考资料链接视觉一致标题样式与整体风格协调✅ 图例最佳实践数量控制图例过多时使用滚动模式位置优化避免图例遮挡关键数据命名规范系列名称清晰易懂交互友好支持点击筛选增强交互视觉协调图例大小适中颜色匹配❌ 避免场景标题过于冗长标题位置遮挡图表图例与数据系列不匹配图例过多导致界面拥挤图例样式与主题冲突7. 常见问题Q1: 如何隐藏标题或图例title:{show:false},legend:{show:false}Q2: 如何修改图例图标形状legend:{data:[{name:系列A,icon:circle},{name:系列B,icon:rect}]}Q3: 如何实现图例分页legend:{type:scroll,pageIconColor:#5470c6,pageTextStyle:{color:#333}}Q4: 如何动态更新图例myChart.setOption({legend:{data:[新系列1,新系列2]}});Q5: 如何自定义图例标签颜色legend:{textStyle:{color:function(name){if(name重要数据)returnred;return#333;}}}8. 小结标题组件用于说明图表主题图例组件用于标识和筛选系列支持多种位置、样式和交互方式滚动图例适用于多系列场景可通过格式化函数自定义显示内容合理配置能显著提升图表专业性