在 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 相关文章推荐
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
js判断密码强度的方法
Mar 18 Javascript
JS sort排序详细使用方法示例解析
Sep 27 Javascript
js实现鼠标切换图片(无定时器)
Jan 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学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
this[] 指的是什么内容 讨论
2007/03/24 Javascript
web 页面分页打印的实现
2009/06/22 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
input框中的name和id的区别
2016/11/16 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
Vue自定义指令详解
2017/07/28 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
python 保存float类型的小数的位数方法
2018/10/17 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
python实现画图工具
2020/08/27 Python
专科毕业生就业推荐信
2013/11/01 职场文书
调研座谈会发言材料
2014/08/23 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
革命电影观后感
2015/06/18 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang