| 1 | ECharts 基本概念 | Canvas 可视化库,用数据 + 配置生成图表 | “数据 + option → 图表” |
| 2 | 初始化 & 基本流程 | 创建图表实例、渲染 option | echarts.init(dom) → setOption(option) |
| 3 | option 总体结构 | 定义图表标题、坐标、数据、交互 | 上面是说明(title/legend/tooltip),中间是坐标(xAxis/yAxis/grid),下面是数据(series) |
| 4 | series | 图表数据的核心,一组 series = 一维度 | 数组形式,多 series 可对比;type 决定图表类型 |
| 5 | series.data | 数据项,可统一或单独样式 | - 数字数组 → 全部统一样式 - 对象数组 → 单项配置优先级最高 |
| 6 | xAxis / yAxis | 定义坐标轴类型和范围 | category → 类目轴,value → 数值轴;多轴用 yAxisIndex |
| 7 | tooltip | 鼠标 hover 时显示信息 | trigger: 'item' → 单点 trigger: 'axis' → 整组 series;formatter 自定义显示 |
| 8 | tooltip.formatter | 自定义 tooltip 内容 | 字符串模板 {a}/{b}/{c} 或函数返回字符串,函数可做条件逻辑 |
| 9 | params | formatter 函数的参数 | hover 数据快照 axis → 数组,item → 对象 seriesName/value/axisValue/color 是关键字段 |
| 10 | emphasis.focus | hover 时高亮谁 | 'self' → 当前点 'series' → 整条系列 |
| 11 | blur | 非重点系列视觉弱化 | 与 emphasis 配合,blur.itemStyle.opacity 控制透明度 |
| 12 | itemStyle | 样式控制 | 正常状态用 itemStyle.color,hover 用 emphasis.itemStyle.color |
| 13 | 条件高亮 | 单个柱子/点特殊显示 | 在 series.data 对象里写 value + itemStyle 即可,不必用函数(小数据量) |
| 14 | markLine | 显示参考线 | 可以固定值 {yAxis: 800} 或计算类型 {type: 'average'},属于 series 内配置 |