ECharts官方教程(三)【在webpack中使用 ECharts】
来源:互联网 发布:java分布式面试 编辑:程序博客网 时间:2024/05/17 01:11
在 webpack 中使用 ECharts
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 也是同样的用法,这里就不赘述了。而对于使用 rollup 的自定义构建,参见 自定义构建 ECharts。
阅读全文
0 0
- ECharts官方教程(三)【在webpack中使用 ECharts】
- 在 webpack 中使用 ECharts
- webpack中使用echarts
- ECharts官方教程(六)【在图表中加入交互组件】
- ECharts官方教程(二)【自定义构建 ECharts】
- 在Vue项目中使用Echarts(五): Echarts绘制地图
- echarts使用教程1
- ECharts官方教程(十四)【使用 Canvas 或者 SVG 渲染】
- 在Vue-cli项目中使用echarts
- ECharts官方教程(一)【5分钟上手ECharts】
- ECharts官方教程(九)【ECharts中的事件和行为】
- 在安卓中使用echarts
- react中使用echarts
- vuejs中使用echarts
- React中使用ECharts
- angular中使用ECharts
- ECharts官方教程(七)【移动端自适应】
- ECharts官方教程(十二)【自定义系列】
- 创建maven web项目遇到的问题
- 【Hadoop】HDFS的运行原理
- SQLServer中char、varchar、nchar、nvarchar的区别
- UML类图关系(泛化 、继承、实现、依赖、关联、聚合、组合)
- 3-7·iptables(防火墙)&selinux
- ECharts官方教程(三)【在webpack中使用 ECharts】
- spring和springmvc的父子容器关系
- mybatis一对多关联查询
- Linux vi 统计字符串出现的次数
- 7.5 构造函数再探
- Mybatis学习总结(三) 实战
- MapReduce基准测试
- Python's datetime module, numpy's datetime64/timedelta64 and pandas' Timestamp/Timedelta objects
- Spoon工具的使用