ECharts 核心知识点总结(到 tooltip)

31 阅读2分钟

✅ ECharts 核心知识点总结(到 tooltip)

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

🧠 核心记忆口诀(帮助快速回忆)

  1. 数据 → series;坐标 → xAxis/yAxis;说明 → title/legend/tooltip
  2. 默认颜色 → itemStyle;hover → emphasis.itemStyle;非焦点 → blur
  3. 单项样式 → data 对象写法;多 series → array
  4. tooltip.formatter → params;axis trigger → 数组,item trigger → 对象
  5. hover 强调 → emphasis.focus;整条高亮 → 'series'