在 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的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 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生成Flash动画的实现代码
2010/03/12 PHP
php数组键值用法实例分析
2015/02/27 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
JavaScript基本对象
2007/01/11 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
pygame学习笔记(4):声音控制
2015/04/15 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python学生信息管理系统修改版
2018/03/13 Python
python tkinter基本属性详解
2019/09/16 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
酒店营销策划方案
2014/02/07 职场文书
篮球社团活动总结
2014/06/27 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
Python实现老照片修复之上色小技巧
2021/10/16 Python
Golang获取List列表元素的四种方式
2022/04/20 Golang
Python使用openpyxl模块处理Excel文件
2022/06/05 Python