ECharts 图表制作完全指南：从零到可视化实战

1. 为什么选择 ECharts

在数据驱动的时代，把枯燥的数字变成一眼能看懂的图表，是每个前端开发者、数据分析师甚至运营同学的刚需。Apache ECharts 作为一款由百度开源、后捐赠给 Apache 基金会的可视化库，凭借以下优势成为国内最主流的图表方案之一：

开箱即用：引入一个 JS 文件即可绘制折线图、柱状图、饼图、地图等几十种图表。
配置驱动 ：所有图表都通过一个 option 对象描述，学习成本低、可读性强。
交互丰富：内置 tooltip、图例筛选、数据缩放、下钻、动画等交互能力。
渲染灵活：支持 Canvas 与 SVG 两种渲染器，兼顾性能与清晰度。
生态完善：支持按需引入、服务端渲染、移动端适配，社区示例极其丰富。

本文将从环境搭建讲起，逐步带你完成常见图表的制作，并深入讲解配置项、交互与性能优化，最后给出一个可直接复用的实战案例。

2. 环境准备与快速上手

2.1 三种引入方式

方式一：CDN 直接引入（适合快速验证）

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>ECharts 入门</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 800px; height: 500px;"></div>
  <script>
    const chart = echarts.init(document.getElementById('main'));
    chart.setOption({
      title: { text: '第一个 ECharts 图表' },
      xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五'] },
      yAxis: { type: 'value' },
      series: [{ type: 'bar', data: [120, 200, 150, 80, 70] }]
    });
  </script>
</body>
</html>

方式二：npm 安装（适合工程化项目）

bash 复制代码

npm install echarts

javascript 复制代码

import * as echarts from 'echarts';

const chart = echarts.init(document.getElementById('main'));
chart.setOption({ /* ... */ });

方式三：按需引入（推荐用于生产环境）

javascript 复制代码

import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([BarChart, LineChart, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer]);

按需引入能显著减小打包体积，是生产项目的首选。

2.2 容器必须有宽高

这是新手最常踩的坑：ECharts 依赖容器尺寸计算画布大小 。如果容器没有显式宽高，图表会渲染成 0×0 而「看不见」。请务必给容器设置 width 和 height。

3. 核心概念：option 配置结构

ECharts 的一切都围绕 option 展开。理解下面几个核心组件，就能组合出绝大多数图表：

组件	作用	常用属性
`title`	图表标题	`text`、`subtext`、`left`
`tooltip`	鼠标悬浮提示	`trigger`（item/axis）、`formatter`
`legend`	图例，可点击筛选	`data`、`top`、`orient`
`grid`	直角坐标系绘图区域	`left`、`right`、`top`、`bottom`
`xAxis` / `yAxis`	坐标轴	`type`、`data`、`name`
`series`	数据系列（图表主体）	`type`、`data`、`name`
`color`	全局调色盘	颜色数组

一个典型的 option 结构如下：

javascript 复制代码

const option = {
  title: { text: '月度销售额' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['线上', '线下'] },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月'] },
  yAxis: { type: 'value', name: '万元' },
  series: [
    { name: '线上', type: 'line', data: [120, 132, 101, 134] },
    { name: '线下', type: 'line', data: [220, 182, 191, 234] }
  ]
};

4. 常见图表制作实战

4.1 折线图：趋势分析

折线图适合展示随时间变化的趋势。加上 smooth 平滑曲线、areaStyle 面积填充，视觉效果更佳。

javascript 复制代码

const lineOption = {
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
  yAxis: { type: 'value' },
  series: [{
    name: '访问量',
    type: 'line',
    smooth: true,
    areaStyle: { opacity: 0.3 },
    data: [820, 932, 901, 934, 1290, 1330, 1320]
  }]
};

4.2 柱状图：分类对比

柱状图适合比较不同类别的数值。通过 itemStyle 可以自定义颜色，通过 label 直接在柱子上显示数值。

javascript 复制代码

const barOption = {
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: ['苹果', '香蕉', '橙子', '葡萄', '西瓜'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    barWidth: '50%',
    label: { show: true, position: 'top' },
    itemStyle: {
      borderRadius: [6, 6, 0, 0],
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#83bff6' },
        { offset: 1, color: '#188df0' }
      ])
    },
    data: [120, 200, 150, 80, 70]
  }]
};

4.3 饼图：占比展示

饼图用于展示各部分占总体的比例。radius 设为数组即可变成环形图。

javascript 复制代码

const pieOption = {
  tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
  legend: { orient: 'vertical', left: 'left' },
  series: [{
    name: '访问来源',
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: true,
    label: { show: true, formatter: '{b}\n{d}%' },
    data: [
      { value: 1048, name: '搜索引擎' },
      { value: 735, name: '直接访问' },
      { value: 580, name: '邮件营销' },
      { value: 484, name: '联盟广告' },
      { value: 300, name: '视频广告' }
    ]
  }]
};

4.4 散点图：相关性分析

散点图适合观察两个变量之间的相关性。

javascript 复制代码

const scatterOption = {
  tooltip: { trigger: 'item' },
  xAxis: { type: 'value', name: '身高(cm)' },
  yAxis: { type: 'value', name: '体重(kg)' },
  series: [{
    type: 'scatter',
    symbolSize: 12,
    data: [[160, 55], [165, 60], [170, 65], [175, 70], [180, 78], [185, 85]]
  }]
};

5. 交互与动态更新

5.1 响应式自适应

浏览器窗口变化时，图表不会自动重绘，需要手动调用 resize：

javascript 复制代码

window.addEventListener('resize', () => {
  chart.resize();
});

如果容器尺寸由布局动态决定，可以使用 ResizeObserver：

javascript 复制代码

const observer = new ResizeObserver(() => chart.resize());
observer.observe(document.getElementById('main'));

5.2 数据动态更新

通过 setOption 增量更新数据，ECharts 会自动做过渡动画：

javascript 复制代码

setInterval(() => {
  const newData = Array.from({ length: 7 }, () => Math.round(Math.random() * 1000));
  chart.setOption({ series: [{ data: newData }] });
}, 2000);

5.3 事件监听

ECharts 支持监听图表上的点击、悬浮等事件，常用于实现下钻：

javascript 复制代码

chart.on('click', (params) => {
  console.log('点击了：', params.name, params.value);
  // 例如：点击省份后加载该省城市数据
});

6. 性能优化与常见问题

6.1 大数据量优化

当数据点超过万级时，建议开启以下配置：

javascript 复制代码

const option = {
  animation: false,          // 关闭动画
  series: [{
    type: 'line',
    large: true,             // 开启大数据量优化
    largeThreshold: 2000,    // 超过该阈值启用
    sampling: 'lttb',        // 降采样策略
    data: bigData
  }]
};

6.2 常见问题排查

图表不显示 ：检查容器是否有宽高、echarts.init 是否在 DOM 挂载后执行。
切换页面后图表变形 ：在 tab 切换或弹窗打开后调用 chart.resize()。
内存泄漏 ：组件销毁时调用 chart.dispose() 释放实例。
Vue/React 中重复初始化 ：确保每个容器只 init 一次，可借助 ref 保存实例。

7. 实战案例：销售数据看板

下面把前面的知识整合成一个可运行的销售看板，包含折线图与饼图联动。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>销售数据看板</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <style>
    body { margin: 0; padding: 20px; font-family: sans-serif; background: #f5f7fa; }
    .dashboard { display: flex; gap: 20px; flex-wrap: wrap; }
    .card { flex: 1 1 400px; background: #fff; border-radius: 8px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
    .chart { width: 100%; height: 360px; }
  </style>
</head>
<body>
  <div class="dashboard">
    <div class="card"><div id="trend" class="chart"></div></div>
    <div class="card"><div id="share" class="chart"></div></div>
  </div>
  <script>
    const trendChart = echarts.init(document.getElementById('trend'));
    const shareChart = echarts.init(document.getElementById('share'));

    trendChart.setOption({
      title: { text: '近半年销售趋势' },
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', data: ['6月', '7月', '8月', '9月', '10月', '11月'] },
      yAxis: { type: 'value', name: '万元' },
      series: [{
        type: 'line',
        smooth: true,
        areaStyle: { opacity: 0.25 },
        data: [320, 380, 410, 390, 460, 520]
      }]
    });

    shareChart.setOption({
      title: { text: '渠道销售占比' },
      tooltip: { trigger: 'item', formatter: '{b}: {d}%' },
      legend: { bottom: 0 },
      series: [{
        type: 'pie',
        radius: ['40%', '65%'],
        data: [
          { value: 45, name: '线上商城' },
          { value: 30, name: '线下门店' },
          { value: 15, name: '分销渠道' },
          { value: 10, name: '其他' }
        ]
      }]
    });

    window.addEventListener('resize', () => {
      trendChart.resize();
      shareChart.resize();
    });
  </script>
</body>
</html>

8. 总结

本文从 ECharts 的引入方式讲起，梳理了 option 的核心配置结构，并通过折线图、柱状图、饼图、散点图四个实战示例演示了常见图表的制作方法，随后介绍了响应式适配、动态更新、事件监听等交互能力，最后给出性能优化建议与一个完整的销售看板案例。

掌握这些内容后，你已经可以应对绝大多数业务可视化需求。下一步可以继续探索地图可视化、关系图、3D 图表以及 ECharts GL 等进阶能力，让数据表达更有表现力。