在 webpack 中使用 ECharts
来源:互联网 发布:淘宝晚礼服推荐 编辑:程序博客网 时间:2024/05/24 13:28
http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
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 也是同样的用法,这里就不赘述了。
另外这些都配置好了,可是有一个legend的标签总是显示不出来,多次检查 也不知道问题出在哪个地方,也对比了官网的例子,最后没有引入legend组建,
加上这个就可以了 require('echarts/lib/component/legend');
- 在 webpack 中使用 ECharts
- ECharts官方教程(三)【在webpack中使用 ECharts】
- webpack中使用echarts
- 在 Rails 中使用 Webpack
- 在项目中使用Webpack
- 在Vue项目中使用Echarts(五): Echarts绘制地图
- 在Vue-cli项目中使用echarts
- 在webpack中如何使用postcss
- 在vue+webpack中使用sass
- 在安卓中使用echarts
- react中使用echarts
- vuejs中使用echarts
- React中使用ECharts
- angular中使用ECharts
- 在开发者模式中使用使用webpack-isomorphic-tools
- 记录在使用react-native-echarts中遇到的问题
- Vue系列——在vue项目中使用echarts
- Vue系列——在vue项目中使用echarts
- PHP 使用SOAP调用接口开发,偶尔会报错
- 安卓 底部导航栏的封装,支持show or hidden 或者 replace 方式
- Android开发入门基础
- 分布式工程中,各工程的配置问题
- 关于安卓setBackgroundColor中Drawable复用导致背景重复改变
- 在 webpack 中使用 ECharts
- 自定义虚线格式的EditText输入框
- Leetcode算法学习日志-680 valid Palindrome II
- scrapy 模拟登录
- BZOJ 2138: stone Hall定理 线段树
- js和jq小知识
- Idea快捷键
- html去掉标签 提取内容
- C++与QML交互,把C++对象特性暴露到QML中