Webpack 集成 ECharts 配置指南

作者：望舒

时间：2026-10-22

本文详细介绍如何在 Webpack 项目中引入 ECharts。从 npm 安装官方维护的包开始，演示基础引入方式，并重点讲解如何通过按需引入图表和组件来将打包体积从 400KB 降至 170KB，适合对构建体积有严格要求的项目。

文章目录

Webpack 集成 ECharts 概述

Webpack 是当前广泛使用的模块打包工具，允许开发者在基于 webpack 的项目中便捷地引入并打包 ECharts。本文假定读者已掌握 webpack 的基本使用，并已在项目中配置好相关环境。

安装与基础引入

通过 npm 安装 ECharts 依赖。

在版本 3.1.1 之前，npm 上的 ECharts 包由非官方维护。自 3.1.1 版本起，ECharts 和 zrender 的 npm 包转由官方 EFE 团队维护，确保了包的稳定性和权威性。

执行以下命令即可通过 npm 完成 ECharts 的安装：


npm install echarts --save

在代码中引入 ECharts 模块。

通过 npm 安装的 ECharts 和 zrender 会存放于 node_modules 目录中。在项目代码中，只需使用 require('echarts') 即可获取完整的 ECharts 实例。


var echarts = require('echarts');
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
});

按需引入优化体积

实现 ECharts 图表和组件的按需引入，以优化构建体积。

默认情况下，使用 require('echarts') 引入的是包含所有图表和组件的完整包，导致文件体积较大。若项目对构建体积有严格限制，可以选择仅引入所需的特定模块。

例如，若示例代码仅需使用柱状图、提示框和标题组件，则只需引入这些模块。这种按需引入的方式可将打包后的体积从 400 多 KB 显著减小至 170 多 KB。


// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
});

所有可按需引入的模块列表详见 https://github.com/ecomfe/echarts/blob/master/index.js。

总结。

以上内容介绍了在 webpack 中使用 ECharts 的具体实例，旨在帮助读者解决集成问题。如有疑问欢迎留言，我们将及时回复。感谢对本站的支持。