在 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 29 Javascript
根据分辩率调用不同的CSS.
Jan 08 Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
js实现旋转木马效果
Mar 17 Javascript
vue组件中的数据传递方法
May 14 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
JS实现长图上下滚动效果
Mar 19 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中的常量)
2014/09/12 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
java遇到微信小程序 "支付验证签名失败" 问题解决
2019/12/22 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
python分布式环境下的限流器的示例
2017/10/26 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
python实现图片插入文字
2019/11/26 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
荣耀商城:HIHONOR
2020/11/03 全球购物
农行实习自我鉴定
2013/09/22 职场文书
英语专业学生个人求职信范文
2014/01/06 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
灰雀教学反思
2014/04/28 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
委托培训协议书
2014/11/17 职场文书
党委工作总结2015
2015/04/27 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
黄河绝恋观后感
2015/06/08 职场文书
怎么用Python识别手势数字
2021/06/07 Python
python神经网络 使用Keras构建RNN训练
2022/05/04 Python