如何快速上手echarts

下面给你一套**“从零快速上手 ECharts”的实战路线**，偏实用、不堆概念，照着做就能出图。

一、先搞清楚 ECharts 是什么

ECharts = 数据 → 配置项(option) → 图表
你几乎所有时间都是在写 option。

核心公式：

chart.setOption(option)

二、3 分钟跑通第一个图（最快方式）

1️⃣ 引入 ECharts（CDN 最省事）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>

  <script>
    const chart = echarts.init(document.getElementById('main'))

    const option = {
      title: { text: '入门示例' },
      tooltip: {},
      xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
      yAxis: {},
      series: [{
        type: 'bar',
        data: [120, 200, 150, 80, 70]
      }]
    }

    chart.setOption(option)
  </script>
</body>
</html>

✅ 打开浏览器就能看到柱状图

三、必须记住的 5 个核心概念（重点）

1️⃣ series（最重要）

你画的是什么图

series: [{
  type: 'line', // bar line pie map ...
  data: [...]
}]

常见 type：

• bar 柱状
• line 折线
• pie 饼图
• scatter 散点
• map 地图

2️⃣ xAxis / yAxis

坐标系（折线、柱状必须有）

xAxis: { type: 'category', data: [...] }
yAxis: { type: 'value' }

3️⃣ tooltip

鼠标悬浮提示

tooltip: { trigger: 'axis' }

4️⃣ legend

图例切换

legend: { data: ['销量'] }

5️⃣ title

标题

title: { text: '销售趋势' }

四、快速画常见图（直接抄）

✅ 折线图

series: [{
  type: 'line',
  data: [820, 932, 901, 934, 1290]
}]

✅ 饼图

series: [{
  type: 'pie',
  data: [
    { value: 40, name: 'A' },
    { value: 30, name: 'B' },
    { value: 30, name: 'C' }
  ]
}]

✅ 多系列对比

legend: { data: ['A', 'B'] },
series: [
  { name: 'A', type: 'bar', data: [1,2,3] },
  { name: 'B', type: 'bar', data: [3,2,1] }
]

五、和框架结合（进阶但简单）

Vue

import * as echarts from 'echarts'

在 mounted 里 echarts.init

React

useEffect(() => {
  const chart = echarts.init(ref.current)
  chart.setOption(option)
}, [])

六、新手最容易踩的坑

❌ div 没宽高（图不出来）
✅ 一定要设 width/height

❌ 数据格式错
✅ 看官方示例的数据结构

❌ 不看官方示例
✅ https://echarts.apache.org/examples

七、推荐学习顺序（最快）

1. 跑通一个 bar 图
2. 改数据 → 看变化
3. 抄 3 个官方示例
4. 学 setOption 动态更新
5. 学事件（chart.on('click')）

如果你愿意，我可以：

• ✅ 用你真实数据帮你写 option
• ✅ 教你动态更新 / 实时数据
• ✅ 按 Vue / React 给你封装组件

你现在是「纯前端 / Vue / React」？