在 webpack 中使用 ECharts的实例详解


Posted in Javascript onFebruary 05, 2018

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

总结

以上所述是小编给大家介绍的在 webpack 中使用 ECharts的实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
js函数调用常用方法详解
Dec 03 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
JS原型链怎么理解
Jun 27 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
在Vue中使用echarts的方法
Feb 05 #Javascript
JavaScript中Object基础内部方法图
Feb 05 #Javascript
基于axios封装fetch方法及调用实例
Feb 05 #Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 #Javascript
JS中Map和ForEach的区别
Feb 05 #Javascript
完美解决axios跨域请求出错的问题
Feb 05 #Javascript
vue 页面加载进度条组件实例
Feb 05 #Javascript
You might like
php多文件上传实现代码
2014/02/20 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
python 多线程应用介绍
2012/12/19 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
如何用python批量调整视频声音
2020/12/22 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
尽职尽责村干部自我鉴定
2014/01/23 职场文书
上班玩手机检讨书
2014/02/17 职场文书
七一建党节演讲稿
2014/09/11 职场文书
新闻人物通讯稿
2014/10/09 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS