在 webpack 中使用 ECharts
http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
Webpack 是目前比较流行的模块打包工具,你可以在使用 webpack 的项目中轻松的引入和打包 ECharts,这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。
npm 安装 ECharts
在 3.1.1
版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1
开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package。
你可以使用如下命令通过 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')
得到的是已经加载了所有图表和组件的 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
对于另一个流行的模块打包工具 browserify 也是同样的用法,这里就不赘述了。
另外这些都配置好了,可是有一个legend的标签总是显示不出来,多次检查 也不知道问题出在哪个地方,也对比了官网的例子,最后没有引入legend组建,
加上这个就可以了 require('echarts/lib/component/legend');
在 webpack 中使用 ECharts的更多相关文章
- webpack中使用ECharts
npm安装ECharts 引入ECharts 通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下.可以直接在项目代码中 require('echarts' ...
- ECharts概念学习系列之ECharts官网教程之在 webpack 中使用 ECharts(图文详解)
不多说,直接上干货! 官网 http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94% ...
- Wabpack系列:在webpack+vue开发环境中使用echarts导致编译文件过大怎么办?
现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echart ...
- 在react项目中使用ECharts
这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...
- 在vscode中使用webpack中安装的echarts文件失败,dom获取class名,图表不显示
所有的东西都是新学的,所以遇到了很多问题: (1)首先,在电脑上已经安装了node的情况下, 在npm中安装echarts:npm install echarts --save mac系统在最前面加上 ...
- vue项目中引用echarts的几种方式
准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或 ...
- Ionic2系列——在Ionic2中使用ECharts
在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...
- Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案
文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...
- webpack中利用require.ensure()实现按需加载
webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...
随机推荐
- Bootstrap表格添加搜索栏
在学习了表格的分页后,本文尝试在表格顶部加入搜索栏,用来筛选表格的数据,先看一下效果: 未进行搜索时,有394条记录: 在输入乘车码“1”和订单号“20150120”后,只有28条记录: 此处使用了两 ...
- iCarousel的简单介绍及应用
iOS开源类iCarousel介绍 iCarousel是一个类,它继承于UIView,用于简化实现各种类型的旋转木马(分页滚动视图)iPhone.iPad和Mac OS.iCarousel实现一些常见 ...
- TP5之页面跳转样式
1.效果图 2.上干货 为了增加对移动设备的支持,在 /application/common.php加入以下函数: function isMobile() { if (isset ($_SERVER ...
- JS鼠标响应事件经过、移动、点击示例介绍
原文: http://www.jb51.net/article/41124.htm onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标 ...
- C# sbyte[]转byte[]
http://stackoverflow.com/questions/2995639/sbyte-vs-byte-using-methodssbyte[] orig = ... byte[] arr ...
- TRANSFORM_TEX是做什么的
简单来说,TRANSFORM_TEX主要作用是拿顶点的uv去和材质球的tiling和offset作运算,确保材质球里的缩放和偏移设置是正确的. (v.texcoord就是顶点的uv) 而_MainTe ...
- Codevs 1140 Jam的计数法
1140 Jam的计数法 题目描述 Description Jam是个喜欢标新立异的科学怪人.他不使用阿拉伯数字计数,而是使用小写英文字母计数,他觉得这样做,会使世界更加丰富多彩.在他的计数法中,每个 ...
- MySQL中group by 与 order by 一起使用排序问题
假设有一个表:reward(奖励表),表结构如下: CREATE TABLE test.reward ( id ) NOT NULL AUTO_INCREMENT, uid ) NOT NULL CO ...
- Java基础 使用Properties类
- Script to Monitor Current User Activity in the Database
Execution Environment: SQL, SQL*Plus, iSQL*Plus Access Privileges: Requires select privileges on vie ...