Echarts常用插件（组件）配置是面试高频考点，主要分为内置核心组件和扩展插件两类。
一、内置核心组件（必考）
Echarts内置组件是图表基础能力的关键，通过option配置，直接决定图表的交互、布局和数据展示。
1. title（标题组件）
作用：定义图表主标题、副标题，快速说明图表主题。
核心配置：
text：主标题文本（如“2023年销量分析”）；subtext：副标题文本（如“单位：万件”）；left/top/right/bottom：定位（支持像素值、百分比，如left: 'center'居中）；textStyle：标题样式（颜色color、字体大小fontSize）。
场景：任何图表顶部展示主题信息，如柱状图顶部显示“月度销售额对比”。
2. legend（图例组件）
作用：展示不同系列（如“产品A”“产品B”）的标记和名称，点击可切换系列显示/隐藏。
核心配置：
data：图例数据数组（需与series中的name严格对应，如['产品A', '产品B']）；orient：布局方向（'horizontal'水平，'vertical'垂直）；selectedMode：选择模式（true多选，false不可选，'single'单选）；left/top：定位（如top: 10距离顶部10px）。
场景：折线图中有多条线（不同产品销量），图例用于筛选显示特定产品。
3. tooltip（提示框组件）
作用：鼠标悬停或点击时，显示当前数据项的详细信息（如数值、类别）。
核心配置：
trigger：触发方式（'item'数据项触发，如柱状图悬停柱子；'axis'坐标轴触发，如折线图悬停显示整条线数据）；formatter：内容格式化（支持字符串模板{b}（类目）、{c}（数值），或回调函数params => params.name + ': ' + params.value）；backgroundColor：背景色（如'#333'）。
场景：柱状图悬停在“Q1”柱子上，提示“Q1：120万”。
4. grid（直角坐标系网格）
作用：控制直角坐标系（柱状图、折线图等）绘图区域的位置和大小，避免图表与标题/图例重叠。
核心配置：
left/top/right/bottom：距离容器边界的距离（支持像素值、百分比，如left: '10%'，bottom: '15%'）；containLabel：是否包含坐标轴标签（true防止标签溢出，默认false）。
场景：调整柱状图在容器中的位置，留出底部空间给x轴标签（如长类别名称）。
5. xAxis/yAxis（坐标轴组件）
作用：定义直角坐标系的x轴和y轴，类目轴（如“周一、周二”）或数值轴（如0-100）。
核心配置：
type：坐标轴类型（'category'类目轴，需配data；'value'数值轴，自动计算范围；'time'时间轴，'log'对数轴）；data：类目轴数据（如xAxis: { data: ['周一', '周二'] }）；name：坐标轴名称（如yAxis: { name: '销量（万件）' }）；axisLabel：标签配置（rotate旋转角度，避免重叠；formatter格式化，如数值单位转换）。
场景：柱状图x轴为“产品类别”（类目轴），y轴为“销量”（数值轴）。
6. dataZoom（数据缩放组件）
作用：用于大数据量图表的区域缩放（如100个数据点，拖动查看局部细节）。
核心配置：
type：缩放类型（'slider'滑动条，可视化操作；'inside'内置，鼠标滚轮/拖动缩放）；xAxisIndex/yAxisIndex：作用的坐标轴索引（默认0，即第一个x轴）；start/end：初始数据窗口范围（百分比，如start: 0, end: 50默认显示前50%数据）。
场景：折线图展示全年365天数据，用
slider型dataZoom拖动查看某月数据。
7. toolbox（工具栏组件）
作用：内置工具按钮（保存图片、数据视图、还原等），提升用户交互效率。
核心配置：
feature：具体工具配置（saveAsImage保存为图片；dataView数据视图（可编辑）；restore还原；dataZoom缩放）。
toolbox: { feature: { saveAsImage: {}, // 保存图片 dataView: { readOnly: false }, // 数据视图（可编辑） } }场景：用户需要将图表保存为PNG，或直接查看/编辑原始数据。
8. series（系列列表组件）
作用：核心配置，定义图表类型（柱状图、折线图等）、数据和样式（一个图表可包含多个系列，如柱状图+折线图混合）。
核心配置：
type：图表类型（'line'折线图，'bar'柱状图，'pie'饼图，'scatter'散点图）；name：系列名称（需与legend.data对应，如name: '产品A'）；data：数据数组（如[10, 20, 30]，或对象数组[{name: 'A', value: 10}]）；label：数据标签（show: true显示数值，position: 'top'标签位置）；itemStyle：图形样式（color颜色，borderRadius圆角）。
场景：柱状图配置
type: 'bar'，数据data: [120, 200, 150]，显示“产品A、B、C”的销量。
二、常用扩展插件（加分项）
扩展插件需额外引入JS文件（如echarts-gl.js），用于特殊图表场景，面试中提及可体现技术广度。
1. echarts-gl（3D图表插件）
作用：绘制3D图表（3D柱状图、3D散点图、地球等），展示三维数据。
核心配置：
引入：
<script src="echarts-gl.js"></script>；series.type：'bar3D'（3D柱状图）、'scatter3D'（3D散点图）、'globe'（地球）；grid3D：3D坐标系（boxWidth/boxHeight/boxDepth控制3D空间大小）。
场景：展示“地区-产品-时间”三维销量数据，或3D地球展示全球分布。
2. echarts-liquidfill（水球图插件）
作用：展示占比数据（如完成率、水位），通过水波动画直观呈现百分比。
核心配置：
引入：
<script src="echarts-liquidfill.js"></script>；series.type：'liquidFill'；data：数据数组（数值0-1，如[0.6]表示60%）；radius：半径（'50%'占容器一半）；color：水波颜色（如['#4992ff']）。
场景：显示“项目完成率60%”“服务器内存使用率80%”。
3. echarts-wordcloud（词云插件）
作用：展示文本数据，词频越高字体越大，用于关键词分析。
核心配置：
引入：
<script src="echarts-wordcloud.js"></script>；series.type：'wordCloud'；data：数据数组（[{name: 'Echarts', value: 100}, {name: 'Vue', value: 80}]）；shape：词云形状（'circle'圆形，'cardioid'心形）；sizeRange：字体大小范围（[12, 50]）。
场景：分析用户评论关键词，展示“产品”“服务”“物流”等词频。
面试总结
重点：内置组件（
series、tooltip、legend、dataZoom）是必考点，需明确作用、核心配置（如series.type、tooltip.trigger、dataZoom.type）及场景。技巧：回答时结合具体图表类型（如“柱状图中用
legend切换系列，tooltip显示数值”），体现配置与实际需求的关联。加分：提及扩展插件（如“echarts-liquidfill做水球图展示完成率”），展示对Echarts生态的了解。