ECharts 入门教程 ECharts怎么在webpack中使用

2024-02-25 开发教程 ECharts 入门教程匿名 10℃

Webpack 是目前比较流行的模块打包工具，它可以分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

如果你已经对 webpack 有了一定的了解，并且能够很好的在项目中使用 webpack ，那么就可以学习怎么在使用 webpack 的项目中轻松的引入和打包 Echarts了。

通过 npm 安装 ECharts

Echarts 3.1.1 之后的版本和 zrender 的 package 在 npm 上是由官方 EFE 维护的，之前的版本不受官方维护。

使用下述命令可以通过 npm 安装 ECharts 和 zrender：

npm install echarts --save

如何引入 ECharts

Echarts 和 zrender 以 npm 的方式安装之后会被存放在 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') 得到的 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]
    }]
});

在 Echarts附录一中包含了更多可以按需引入的模块列表。

延伸阅读

Browserify 是另一个现今流行的模块打包工具，它可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库，它的用法与以上描述的方法相同。

上一节：如何快速上手ECharts

下一节： ECharts个性化图表样式的实现

"ECharts 入门教程"的目录

ECharts 入门教程 ECharts怎么在webpack中使用

通过 npm 安装 ECharts

如何引入 ECharts

ECharts 图表和组件如何按需引入

延伸阅读