ECharts 图表库：丰富的开箱即用图表

FreeGuideOnline 最新 2026-06-18

ECharts 图表库：丰富的开箱即用图表

ECharts 是一个基于 JavaScript 的开源可视化库，由百度前端团队维护，能够轻松创建交互式、高度定制化的数据图表。无论是简单的折线图，还是复杂的地理热力图，ECharts 都提供了开箱即用的解决方案，让你用少量代码就能构建出专业级图表。

什么是 ECharts

ECharts 全称 Enterprise Charts，即“商业级数据图表”。它兼容大部分现代浏览器及移动设备，底层依赖轻量级的 Canvas 库 ZRender，提供直观、丰富、可交互的可视化效果。

ECharts 的核心优势包括：

  • 丰富的图表类型：内置数十种图表，从常规的折线图、柱状图、饼图，到地理地图、热力图、关系图等。
  • 开箱即用：只需引入库、准备容器、编写配置项，无需处理底层绘制逻辑。
  • 高度可定制：通过配置项（option）可以调整颜色、动画、交互、数据格式等几乎所有细节。
  • 大数据量支持：增量渲染、数据缩放等技术可轻松处理数十万级别的数据点。
  • 良好的兼容与扩展：支持按需引入，减少代码体积；提供丰富的扩展插件和主题。

环境准备与安装

ECharts 的引入方式非常灵活，你可以根据项目场景选择不同的方法。

通过 CDN 快速引入

最简单的方式是在 HTML 文件中通过 <script> 标签引入 CDN 上的 ECharts 文件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 快速开始</title>
</head>
<body>
    <!-- 为图表准备一个具有宽高的 DOM 容器 -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
    <script>
        // 初始化图表
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用配置项显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

粘贴以上代码到 .html 文件并用浏览器打开，你就能看到一个柱状图。

通过 npm 安装

对于 Vue、React 等现代前端项目，推荐使用 npm 安装 ECharts。

npm install echarts --save

然后在组件中按需引入：

// 引入 ECharts 核心模块
import * as echarts from 'echarts/core';
// 引入柱状图图表
import { BarChart } from 'echarts/charts';
// 引入标题、提示框等组件
import { TitleComponent, TooltipComponent } from 'echarts/components';
// 引入 Canvas 渲染器
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([TitleComponent, TooltipComponent, BarChart, CanvasRenderer]);

// 基于准备好的容器初始化图表
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    // 配置项...
});

按需引入可以显著减小打包体积，只在用到特定图表类型时才引入它们。

核心概念：图表容器与初始化

使用 ECharts 画图，你需要遵循以下基础步骤：

  1. 准备一个 DOM 容器：必须是一个具有宽和高的 HTML 元素（通常使用 <div>），例如 <div id="chart" style="width: 600px; height: 400px;"></div>。
  2. 初始化 ECharts 实例：通过 echarts.init(dom) 创建实例。
  3. 设置配置项（option）：通过 setOption(option) 将数据和样式配置传入实例。
  4. （可选）响应式处理：监听窗口大小变化，调用 myChart.resize() 让图表自适应。
var dom = document.getElementById('chart');
var myChart = echarts.init(dom);
// 配置项可以包含数据、样式等
var option = {
    // 这里是图表的灵魂
};
myChart.setOption(option);

// 使图表自适应窗口
window.addEventListener('resize', function() {
    myChart.resize();
});

深入配置项（option）

ECharts 的魔法几乎全部藏在 option 对象里。配置项采用声明式设计，你只需描述“想要什么样的图表”，ECharts 就会自动渲染。下面拆解最常用的配置项。

标题、图例与提示框

option = {
    title: {
        text: '主标题',
        subtext: '副标题',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',  // 坐标轴触发，用于柱状图、折线图
        // trigger: 'item' // 数据项触发，用于饼图
    },
    legend: {
        data: ['销量', '利润'],
        bottom: 10
    },
    // ... series
};
  • title：图表标题及其位置。
  • tooltip：鼠标悬停时显示的数据提示框，可配置触发方式、格式化内容等。
  • legend：图例，显示不同系列的名称，支持交互式筛选。

xAxis 和 yAxis（直角坐标系）

大多数图表（折线图、柱状图等）需要在直角坐标系中绘制。

xAxis: {
    type: 'category',   // 类目轴，适用于离散数据
    data: ['周一', '周二', '周三', '周四', '周五']
},
yAxis: {
    type: 'value'       // 数值轴
}

类目轴常用 data 指定每个类别的标签；数值轴可以设置 min、max、axisLabel 等。

series（系列）——图表的核心

series 是数组，每个元素代表一组数值以及将其映射成何种图表。

series: [{
    name: '蒸发量',
    type: 'line',
    data: [120, 200, 150, 80, 70],
    smooth: true    // 平滑曲线
}, {
    name: '降水量',
    type: 'bar',
    data: [60, 85, 78, 100, 54]
}]

组合不同的 type，可以在同一个图表中混合显示折线图和柱状图等。

常用图表类型与示例

ECharts 提供了 20 多种图表类型，下面介绍使用频率最高的几种。

折线图（line）

适合展示趋势变化。

option = {
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: { type: 'value' },
    series: [{
        name: '访问量',
        type: 'line',
        data: [820, 932, 901, 934, 1290, 1330],
        markLine: {
            data: [{ type: 'average', name: '平均值' }]
        }
    }]
};

柱状图（bar）

强调数据之间的比较。

series: [{
    name: '订单量',
    type: 'bar',
    data: [320, 450, 380, 590, 410],
    itemStyle: {
        color: '#5470C6',
        borderRadius: [5, 5, 0, 0]  // 圆角
    }
}]

饼图（pie）

展示各部分占整体的比例。

series: [{
    name: '来源渠道',
    type: 'pie',
    radius: '55%',
    center: ['50%', '50%'],
    data: [
        { value: 735, name: '搜索引擎' },
        { value: 580, name: '直接访问' },
        { value: 484, name: '社交媒体' },
        { value: 300, name: '广告营销' }
    ],
    emphasis: {
        itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    }
}]

散点图（scatter）

常用于分析变量之间的相关性。

option = {
    xAxis: {},
    yAxis: {},
    series: [{
        type: 'scatter',
        symbolSize: 20,
        data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81]
            // ...更多数据点
        ]
    }]
};

地图（map）

地理可视化，需要注册地图文件（中国地图等）。

// 假设已引入 china.js 地图
series: [{
    type: 'map',
    map: 'china',
    roam: true,      // 允许缩放和平移
    label: {
        show: true
    },
    data: [
        { name: '广东', value: 200 },
        { name: '北京', value: 180 }
        // ...
    ]
}]

在使用地理地图前，必须先通过 echarts.registerMap('china', geoJson) 注册地图数据，或者引入 ECharts 官方提供的地图脚本。

定制样式与主题

ECharts 支持全局主题、调色盘和自定义视觉元素。

使用内置主题

ECharts 默认两套主题：'light' 和 'dark'。

var myChart = echarts.init(dom, 'dark');

自定义颜色

可以在全局配置项中指定调色盘，所有图表系列将按顺序取色。

option = {
    color: ['#c23531', '#2f4554', '#61a0a8', '#d48265'],
    // ...其他配置
};

图形样式（itemStyle）

针对系列中的图形，可以设置颜色、渐变、阴影等。

series: [{
    type: 'bar',
    data: [23, 45, 67],
    itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 1, color: '#188df0' }
        ])
    }
}]

交互与动画

ECharts 默认提供了丰富的用户交互，并且大多数可以关闭或定制。

数据缩放

对直角坐标系图表，可使用 dataZoom 组件让用户拖动滑块在数据窗口内缩放。

dataZoom: [{
    type: 'slider',
    start: 0,
    end: 50
}]

工具栏

toolbox 组件提供保存为图片、数据视图、动态类型切换等功能。

toolbox: {
    feature: {
        saveAsImage: {},
        dataView: {},
        magicType: { type: ['line', 'bar'] },
        restore: {}
    }
}

自适应与响应式

除了手动监听 resize 事件，ECharts 也支持 Media Query 式的响应式配置，根据容器尺寸切换不同配置。

option = {
    baseOption: {
        // 基础配置
    },
    media: [{
        query: { maxWidth: 500 },
        option: {
            legend: { orient: 'vertical' }
        }
    }]
};

动画控制

可以使用 animationDuration 和 animationEasing 调整动画时长与缓动函数。

option = {
    animation: true,
    animationDuration: 1000,
    animationEasing: 'cubicOut',
    series: [{
        // ...
    }]
};

常见问题与最佳实践

  1. 图表不显示
    检查容器是否有宽高；确保在容器渲染到 DOM 后再执行 echarts.init；检查是否忘记调用 setOption。

  2. 数据量过大性能问题
    使用 large: true 开启大数据量模式，配合 dataZoom 分区域显示；或考虑使用 Canvas 渲染（默认）以获得更好性能。

  3. 移动端适配
    可以使用百分比设置容器大小，并设置 grid 的 left/right/top/bottom 为百分比，实现流式布局。同时建议启用 echarts.init(dom, 'light', { renderer: 'svg' }) 使用 SVG 渲染以保证移动端清晰度。

  4. 按需加载优化
    定制项目时，只引入用到的图表和组件，避免引入整个 echarts 包，这可大幅减少最终打包体积。

  5. 动态更新数据
    只需再次调用 myChart.setOption(newOption)，ECharts 会自动对比新旧数据并执行过渡动画，无需手动销毁重绘。

ECharts 的学习曲线平缓，核心在于理解配置项的结构。一旦掌握了 option 的组织方式，你就能快速创建出适合任何场景的可视化图表。从简单的运营报表到复杂的数据大屏，ECharts 都能成为你手中得力的工具。