ECharts 核心知识点整理

🟦 ECharts 核心知识点整理（Vue3 + TS）

---

1️⃣ DOM 引用与实例

获取 DOM

const chartRef = ref<HTMLElement | null>(null)

• Vue3 ref 用于获取 DOM 元素
• .value 才是实际 DOM

保存 ECharts 实例

let chart: echarts.ECharts | null = null

• 保存 echarts.init(chartRef.value) 返回的实例

• 便于：

  • 更新图表 chart.setOption()
  • 自适应窗口 chart.resize()
  • 销毁图表 chart.dispose()

虽然不是必须，但实际项目几乎每次都用，属于最佳实践。

---

2️⃣ 核心配置项 (option)

ECharts 图表的 核心是 option 对象，通过它控制图表所有内容。

常用属性

属性	作用	示例
title	图表标题	{ text: '折线图示例', left: 'center' }
legend	图例，显示系列名，支持点击隐藏	{ data: ['销量', '利润'], top: '10px' }
tooltip	鼠标悬停提示框	{ trigger: 'axis', formatter: '{a}<br>{b}:{c}' }
grid	图表边距和坐标轴布局	{ left:'10%', right:'10%', containLabel:true }
xAxis	横轴	{ type:'category', data:['一月','二月'] }
yAxis	纵轴	{ type:'value', min:0, max:1000 }
series	数据系列，折线/柱状/饼图	[ { name:'销量', type:'line', data:[300,500] } ]

---

3️⃣ 核心概念解释

title

• 图表标题
• 可设置位置、字体、颜色

legend

• 图例显示系列名
• 支持点击控制系列显示/隐藏

tooltip

• 鼠标悬停显示详细信息
• trigger: 'axis' → 显示该 X 轴所有系列
• trigger: 'item' → 显示单个数据点
• 支持自定义格式 formatter

grid

• 控制图表边距、防止标签遮挡
• containLabel: true 保证坐标轴文字完整显示

xAxis / yAxis

• xAxis：横轴，常用 type: 'category'
• yAxis：纵轴，常用 type: 'value'
• 可设置最小/最大值、单位、刻度格式

series

• 核心数据

• 每个 series 对应一条折线或一组柱

• 常用属性：

  • name：系列名称
  • type：折线/柱状/饼图
  • data：数据
  • smooth：折线平滑
  • areaStyle：折线面积填充
  • color：线条或柱子颜色

chart.setOption(option)

• 渲染图表
• 支持增量更新数据，保持动画
• 调用多次可更新图表，不重新创建

---

4️⃣ 动态更新 + 响应式数据

• 用 Vue3 ref / reactive 存储数据
• 数据变化 → 调用 chart.setOption() 更新图表
• 支持动画过渡

示例：

chartData.xData = ['五月','六月']
chartData.seriesData = [400, 600]
chart?.setOption({
  xAxis: { data: chartData.xData },
  series: [{ data: chartData.seriesData }]
})

核心点：

• 数据响应式控制图表
• 保持动画过渡
• 支持多系列同时更新
• 可与接口异步数据结合