用 ECharts 把数据画出来——折线、柱状、饼图一文上手

后端给到前端的往往是一串 JSON：[{date:'08-01', uv:1200}, ...]。直接塞进表格用户根本看不出趋势。把数字变成图，是人类大脑最快理解信息的方式。ECharts 是百度开源、现在由 Apache 孵化的图表库，几乎覆盖你能想到的所有图形，而且 API 统一、文档全中文，入门特别顺。

为什么不直接用 CSS 手画？柱状图还好说，div 高度调一调能凑合；但折线、饼图、带 tooltip 的交互、图例联动，自己写成本太高，而且各种浏览器兼容坑能让你怀疑人生。用 ECharts，核心就一个方法：setOption，把"数据 + 配置"喂进去，图就出来了。

一、5 分钟接入

最简单的方式是 CDN 引入，省去打包配置，适合快速验证：

<!-- 准备一个带宽高的容器，ECharts 会往里画 -->
<div id="chart" style="width: 600px; height: 400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script>
  // 1. 基于dom初始化
  const chart = echarts.init(document.getElementById('chart'));
  // 2. 配置项
  const option = { /* 后面填 */ };
  // 3. 渲染
  chart.setOption(option);
</script>

在 Vue/React 项目里也类似，区别只是把 init 放在 mounted/useEffect 里，并在组件销毁时调 chart.dispose() 释放，否则切页面会内存泄漏。另外记得监听窗口缩放：window.addEventListener('resize', () => chart.resize())，否则图表不会跟着容器自适应。

二、折线图：看趋势

折线图最适合表现"随时间变化"。比如一周的访问量：

chart.setOption({
  title: { text: '近 7 天 UV 趋势' },
  tooltip: { trigger: 'axis' },          // 鼠标移上去显示整条线的值
  xAxis: { type: 'category', data: ['周一','周二','周三','周四','周五','周六','周日'] },
  yAxis: { type: 'value' },
  series: [{
    name: 'UV',
    type: 'line',                         // 图形类型：line
    smooth: true,                         // 曲线平滑
    data: [1200, 1320, 1100, 1450, 1600, 2100, 1980]
  }]
});

tooltip.trigger: 'axis' 是折线图常用的配置，鼠标在图上移动会弹出该 x 位置所有系列的值，比默认好用太多。

三、柱状图：做对比

柱状图强调"类别之间的差别"。比如各端设备的访问占比对比：

chart.setOption({
  title: { text: '各端访问量对比' },
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  xAxis: { type: 'category', data: ['PC','移动端','小程序','Pad'] },
  yAxis: { type: 'value' },
  series: [{
    name: ' visits',
    type: 'bar',                          // 图形类型：bar
    data: [3200, 8900, 5400, 1200],
    itemStyle: { color: '#5470c6' }
  }]
});

柱状图想表现"正负"或"多系列分组"也很方便，加多个 series 就会自动并排显示。

四、饼图：看占比

占比类问题（比如流量来源构成）用饼图最直观：

chart.setOption({
  title: { text: '流量来源占比' },
  tooltip: { trigger: 'item', formatter: '{b}: {d}%' },  // {d} 是百分比
  legend: { bottom: 0 },
  series: [{
    type: 'pie',
    radius: '55%',
    data: [
      { name: '直接访问', value: 335 },
      { name: '搜索引擎', value: 1548 },
      { name: '社交媒体', value: 810 },
      { name: '其他', value: 235 }
    ]
  }]
});

formatter: '{b}: {d}%' 让 tooltip 直接显示"名称: 百分比"，比默认只显示数值友好。

五、常用配置速查表

记住一个规律：轴类（折线/柱状）用 category 横轴 + value 纵轴，饼图不用轴、直接给 data 数组。搞清这个，三种图随时切换。

六、数据从哪来

真实项目里，option.series[0].data 不是手写的，而是从接口拿：

fetch('/api/uv-trend')
  .then(res => res.json())
  .then(json => {
    chart.setOption({
      xAxis: { data: json.map(i => i.date) },
      series: [{ data: json.map(i => i.uv) }]
    });
  });

拿到数据后只更新 series.data 和 xAxis.data，ECharts 会平滑重绘，不用动其他配置。

小结

ECharts 的核心就是"初始化 → setOption(数据+配置) → 销毁/resize"。折线看趋势、柱状做对比、饼图看占比，三种图覆盖了日常 80% 的需求。剩下的环形图、散点图、地图，无非是换 series.type 加几个配置项，套路完全一致。