阅读(3162) (0)

ECharts怎么在webpack中使用

2017-08-24 11:15:11 更新

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 安装的一些库,它的用法与以上描述的方法相同。