ECharts 学习 - 技术栈

一、ECharts 概念：

ECharts 是由百度前端团队开发并维护的开源可视化库，基于 JavaScript 实现，支持涵盖折线图、柱状图、饼图、散点图、地图、雷达图、仪表盘、3D 图表等 20+ 图表类型，同时提供拖拽重计算、数据刷选、联动交互等高级功能。

核心优势：为何成为前端可视化首选？

开箱即用，低成本上手：无需复杂的底层封装，几行代码即可实现基础图表渲染，API 设计符合前端开发者直觉；
全场景覆盖：从简单的单维度数据展示，到复杂的多图表联动、3D 可视化、地理信息可视化，满足企业级所有可视化需求；
高度可定制：支持自定义主题、样式、动画、交互逻辑，可精准匹配产品视觉风格；

与其他可视化库的对比

可视化库	优势	劣势	适用场景
ECharts	功能全、定制性强、中文文档、适配性好	3D 功能需依赖扩展库	企业级后台、大屏可视化、通用数据展示
D3.js	灵活性极高、底层能力强	学习成本高、开发效率低	高度定制化的复杂可视化场景
Chart.js	轻量、易用、体积小	图表类型少、高级功能弱	简单的轻量级可视化需求
Highcharts	交互流畅、国际化文档	商业使用需授权、体积较大	海外项目、对交互要求高的场景

综上，ECharts 是 "性价比" 最高的选择 ------ 既兼顾开发效率，又能满足绝大多数企业级场景的定制需求。

二、ECharts 快速入门：从环境搭建到第一个图表

1. 环境准备：三种引入方式

ECharts 支持多种引入方式，可根据项目场景选择：

方式 1：CDN 引入（快速测试 / 小型项目）

无需安装依赖，直接在 HTML 中引入官方 CDN 链接：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ECharts 入门示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px; height: 400px;"></div>
</body>
</html>

方式 2：npm 安装（工程化项目，推荐）

适用于 Vue/React/Angular 等框架项目，通过包管理器安装：

复制代码

# npm 安装
npm install echarts --save

# yarn 安装
yarn add echarts

# pnpm 安装
pnpm add echarts

方式 3：按需引入（减小项目体积）

ECharts 完整包体积约 500KB+，按需引入可仅加载所需图表和组件：

复制代码

// 引入 ECharts 核心模块
import * as echarts from 'echarts/core';
// 引入柱状图图表，按需引入需要的图表类型
import { BarChart } from 'echarts/charts';
// 引入提示框、标题、直角坐标系等组件
import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components';
// 引入 Canvas 渲染器（默认）
import { CanvasRenderer } from 'echarts/renderers';

// 注册所需组件
echarts.use([TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]);

2. 第一个图表：柱状图实现

无论哪种引入方式，ECharts 核心渲染流程均为 "初始化实例 → 配置项设置 → 渲染图表" 三步：

复制代码

// 步骤 1：获取图表容器 DOM 节点
const chartDom = document.getElementById('main');
// 步骤 2：初始化 ECharts 实例
const myChart = echarts.init(chartDom);
// 步骤 3：配置项（核心，决定图表样式、数据、交互）
const option = {
    // 标题配置
    title: {
        text: '2024年各季度产品销量', // 主标题
        subtext: '单位：万件', // 副标题
        left: 'center' // 标题位置：居中
    },
    // 提示框配置：鼠标悬浮显示数据详情
    tooltip: {
        trigger: 'axis', // 触发方式：坐标轴触发
        axisPointer: { type: 'shadow' } // 指示器样式：阴影，就是滑动上去背景变灰
    },
    // 图例配置：多系列数据时区分不同系列
    legend: {
        data: ['产品A', '产品B'],    // 配置可显示图例，图例就是图标旁的小图标，有哪些数据类型
        left: 'left'
    },
    // 直角坐标系配置：x/y 轴容器，就是配置坐标轴或者说图表主体内容的位置
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true // 包含坐标轴标签，让坐标轴标签也参与位置计算
    },
    // x 轴配置
    xAxis: {
        type: 'category', // 类目轴（非数值）
        data: ['第一季度', '第二季度', '第三季度', '第四季度']
    },
    // y 轴配置
    yAxis: {
        type: 'value' // 数值轴
    },
    // 系列数据：图表核心数据
    series: [
        {
            name: '产品A',
            type: 'bar', // 图表类型：柱状图
            data: [35, 48, 62, 75],
            itemStyle: { color: '#409EFF' } // 柱子颜色
        },
        {
            name: '产品B',
            type: 'bar',
            data: [28, 39, 51, 68],
            itemStyle: { color: '#67C23A' }
        }
    ]
};
// 步骤 4：设置配置项并渲染
myChart.setOption(option);

运行上述代码，即可得到一个包含标题、提示框、图例的双系列柱状图 ------ 这是 ECharts 最基础的使用范式，所有复杂图表均基于 "配置项（option）" 的扩展：

3. 核心概念：理解 ECharts 配置项

ECharts 的核心是 "配置项驱动"，所有功能都通过 option 对象配置，掌握以下核心概念，就能快速适配所有图表类型：

容器（Dom）：必须为图表设置固定宽高（或通过 CSS 自适应），否则无法渲染；

组件（Component）：标题（title）、提示框（tooltip）、图例（legend）、坐标轴（xAxis/yAxis）、网格（grid）等，是图表的 "辅助元素"；

系列（Series） ：图表的核心数据层，type 字段决定图表类型（bar/line/pie 等），data 字段为数据源；

样式（Style） ：通过 itemStyle/textStyle/axisStyle 等配置元素样式，支持颜色、字体、边框、阴影等；

交互（Interaction） ：通过 tooltip/dataZoom/roam 等配置交互逻辑，如鼠标悬浮、数据缩放、地图漫游等。

三、ECharts 核心场景实战：从基础图表到高级交互

1. 常见图表类型：

ECharts 支持 20+ 图表类型，以下是高频场景的配置要点：

场景 1：折线图

适用于展示数据随时间 / 维度的变化趋势，核心配置与柱状图类似，仅需将 series.type 改为 line，并可配置折线平滑、标记点等：

复制代码

series: [
    {
        name: '用户增长',
        type: 'line',
        data: [120, 150, 180, 210, 190, 250],
        smooth: true, // 折线平滑
        symbol: 'circle', // 标记点形状
        symbolSize: 8, // 标记点大小
        markPoint: { // 标记极值点
            data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
            ]
        },
        markLine: { // 标记平均线
            data: [{ type: 'average', name: '平均值' }]
        }
    }
]

场景 2：饼图

适用于展示各维度占总体的比例，核心配置需注意 radius（饼图半径）、label（标签）、roseType（南丁格尔图）：

复制代码

option = {
    title: { text: '产品品类占比', left: 'center' },
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'left' },
    series: [
        {
            name: '销量占比',
            type: 'pie',
            radius: ['40%', '70%'], // 内/外半径（环形图）
            avoidLabelOverlap: false,
            label: {
                show: true,
                position: 'outside',
                formatter: '{b}: {c} ({d}%)' // 标签格式：名称+数值+百分比
            },
            emphasis: { // 鼠标悬浮高亮
                itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0,0,0,0.5)' }
            },
            data: [
                { value: 35, name: '电子产品' },
                { value: 25, name: '服装' },
                { value: 20, name: '食品' },
                { value: 15, name: '家居' },
                { value: 5, name: '其他' }
            ]
        }
    ]
};

场景 3：3D 图表

通过 ECharts GL 扩展库实现 3D 柱状图、散点图、地图，需先引入 echarts-gl：

复制代码

<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>

option = {
    title: { text: '3D 销量对比图' },
    xAxis3D: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
    yAxis3D: { type: 'category', data: ['产品A', '产品B', '产品C'] },
    zAxis3D: { type: 'value' },
    grid3D: { boxWidth: 200, boxHeight: 100, depth: 80 },
    series: [
        {
            type: 'bar3D',
            data: [
                [0, 0, 35], [0, 1, 28], [0, 2, 42],
                [1, 0, 48], [1, 1, 39], [1, 2, 55],
                [2, 0, 62], [2, 1, 51], [2, 2, 68],
                [3, 0, 75], [3, 1, 68], [3, 2, 80]
            ],
            shading: 'lambert', // 3D 着色方式
            label: { show: true }
        }
    ]
};

2. 高级交互

ECharts 提供丰富的交互能力，以下是企业级项目高频使用的交互功能：

功能 1：动态更新数据

适用于实时数据展示（如监控大屏、实时销量），通过 setOption 增量更新数据：

复制代码

// 模拟实时数据更新
let count = 0;
setInterval(() => {
    const newData = [
        Math.floor(Math.random() * 100),
        Math.floor(Math.random() * 100),
        Math.floor(Math.random() * 100),
        Math.floor(Math.random() * 100)
    ];
    // 增量更新：仅修改数据，保留其他配置
    myChart.setOption({
        series: [{ name: '产品A', data: newData }]
    });
    count++;
    if (count > 10) clearInterval(this);
}, 1000);

功能 2：数据缩放

适用于大数据量图表，允许用户缩放 / 拖拽查看数据细节：

复制代码

option = {
    xAxis: { type: 'category', data: [...Array(100).keys()].map(i => `第${i+1}天`) },
    yAxis: { type: 'value' },
    dataZoom: [
        { type: 'slider', xAxisIndex: 0, bottom: 0 }, // 底部滑动条缩放
        { type: 'inside', xAxisIndex: 0 } // 鼠标滚轮缩放
    ],
    series: [{ type: 'line', data: [...Array(100)].map(() => Math.random() * 100) }]
};

功能 3：自定义提示框

通过 formatter 自定义提示框内容，展示更丰富的信息：

复制代码

tooltip: {
    trigger: 'axis',
    formatter: function (params) {
        let res = `<div style="font-weight: bold;">${params[0].name}</div>`;
        params.forEach(item => {
            res += `<div>${item.seriesName}：${item.value}万件（同比${item.value > 50 ? '增长' : '下降'}${Math.abs(item.value - 50)}%）</div>`;
        });
        return res;
    }
}

五、ECharts 进阶学习(一部分)

1. 自定义主题

ECharts 支持自定义主题（如匹配产品品牌色），可通过官方主题编辑器（https://echarts.apache.org/zh/theme-builder.html）生成主题配置，再引入项目：

复制代码

// 引入自定义主题
import './my-theme.json';
// 初始化时指定主题
const myChart = echarts.init(chartDom, 'my-theme');

2. 导出图表为图片 / PDF

通过 ECharts 内置的 getDataURL 方法，可将图表导出为图片，结合 jsPDF 可实现 PDF 导出：

复制代码

// 导出为图片
const exportChart = () => {
    const dataUrl = myChart.getDataURL({
        type: 'png',
        pixelRatio: 2, // 分辨率
        backgroundColor: '#fff'
    });
    const a = document.createElement('a');
    a.href = dataUrl;
    a.download = 'chart.png';
    a.click();
};

// 绑定导出按钮事件
document.getElementById('exportBtn').addEventListener('click', exportChart);

总结：

ECharts是目前使用较为广泛的一项数据可视化的工具，使用起来简单方便。我在写项目的时候使用起来非常简单，只需要写几行代码就能实现一个不错的效果图，且通过个性化配置后能很好的适配使用场景。