ECharts学习

一、ECharts 基本认知

✅ ECharts 是什么

• 一个 基于 Canvas 的数据可视化库
• 核心思想：
  👉 数据 + option 配置 → 图表

---

✅ 基本使用流程（牢记）

const chart = echarts.init(dom)
chart.setOption(option)

原则：

• init 只做一次
• 后续更新只用 setOption

---

二、option 整体结构（骨架认知）

option = {
  title,
  tooltip,
  legend,
  grid,
  xAxis,
  yAxis,
  series
}

📌 一句话记忆法：

上面是“说明”，中间是“坐标”，下面是“数据”

---

三、series —— 图表的“灵魂”

✅ series 是数组

series: [ {}, {}, ... ]

• 一个对象 = 一组数据
• 多 series = 多维度对比

---

✅ type 决定画什么

type	图形
bar	柱状图
line	折线图
pie	饼图

---

✅ series.data 的两种形态（非常关键）

1️⃣ 数字数组（统一样式）

data: [500, 700, 800]

2️⃣ 对象数组（单项控制）

data: [
  { value: 500 },
  { value: 900, itemStyle: { color: 'red' } }
]

👉 单项配置优先级最高

---

四、坐标轴（axis）的本质

✅ category 轴 vs value 轴

xAxis: { type: 'category' }
yAxis: { type: 'value' }

• 类目 → category
• 数值 → value

---

✅ 双 Y 轴的核心原理

yAxis: [{}, {}]
yAxisIndex: 1

👉 series 决定自己用哪个轴

---

五、tooltip —— 信息层

✅ trigger 的选择

trigger	场景
item	单个数据
axis	多 series（必选）

---

六、markLine —— 业务参照线

✅ 属于 series

series: [{
  markLine: { ... }
}]

---

✅ 两种用法

自动计算

{ type: 'average' }

固定值

{ yAxis: 800 }

---

七、样式系统（你现在非常重要的一块）

✅ 两个状态（必须记住）

状态	配置
正常	itemStyle
hover	emphasis.itemStyle

---

✅ hover 行为控制

emphasis: {
  focus: 'series'
}

👉 hover 某一项 → 整条 series 高亮

---

八、条件高亮（业务常用）

✅ 不用函数的写法

{
  value: 900,
  itemStyle: { color: 'red' }
}

👉 小数据量、规则明确 → 首选

---

✅ 一句话总总结（非常重要）

ECharts 的本质不是“画图”，
而是用配置表达“数据与业务的关系”。