npm安装ECharts

引入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 减小 大专栏  webpack中使用ECharts到 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的更多相关文章

  1. 在 webpack 中使用 ECharts

    http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts W ...

  2. ECharts概念学习系列之ECharts官网教程之在 webpack 中使用 ECharts(图文详解)

    不多说,直接上干货! 官网 http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94% ...

  3. Wabpack系列:在webpack+vue开发环境中使用echarts导致编译文件过大怎么办?

    现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echart ...

  4. 在react项目中使用ECharts

    这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...

  5. 在vscode中使用webpack中安装的echarts文件失败,dom获取class名,图表不显示

    所有的东西都是新学的,所以遇到了很多问题: (1)首先,在电脑上已经安装了node的情况下, 在npm中安装echarts:npm install echarts --save mac系统在最前面加上 ...

  6. vue项目中引用echarts的几种方式

    准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或   ...

  7. Ionic2系列——在Ionic2中使用ECharts

    在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...

  8. Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案

    文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...

  9. webpack中利用require.ensure()实现按需加载

    webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...

随机推荐

  1. win10使用笔记本自带显卡GUP安装CUDA,版本问题

    1.GPU算力问题 查询:win+r, GPU:GeForce GTX 850m,算力5.0,还可以跑得起来深度项目 2.我们需要查看NVIDIA驱动版本,才能安装合适的CUDA版本. 在C:\Pro ...

  2. 【Gson】网页上String获取的Json数据转化为对象

    1.网络上获取的String Json格式转化为对象获取数据: 需要的包:Gson Maven依赖: <!-- https://mvnrepository.com/artifact/com.go ...

  3. webpack4+vue 打包 就是没效果?求解!!!

    开始对着视频操作 教学视频 用的webpack2 所以没成功  但是 Jquery 可以 成功渲染.Vue就不行. 百度 webpack4+vue打包简单入门:https://segmentfault ...

  4. 吴裕雄--天生自然 JAVA开发学习:String 类

    public class StringDemo{ public static void main(String args[]){ char[] helloArray = { 'r', 'u', 'n' ...

  5. c# 基础switct---case用于处理多条件的定值的判断

    题目:李四的年终工作评定,如果定为A级,则工资涨500元,如果定为B级,则工资涨200元,如果定为C级,工资不变,如果定为D级工资降200元,如果定为E级工资降500元. 设李四原工资为5000,请用 ...

  6. c# 异常处理 try --catch

    初学 try---catch 语法 try { 可能会出现异常的代码; 异常出现的那行代码下面的代码全不会执行,直接跳到catch中执行 ... ... } //try和catch之间不能有其他的代码 ...

  7. HttpClient apache上篇

    1.什么是HttpClient Http 是Hyper-Text Transfer Protocol简写,迄今为止互联网应用最广泛的协议.网络服务.互联网应用.网络计算需求的增长,持续推动http协议 ...

  8. sol - 0x60,61,62

    [例题]走廊泼水节 设当前扫描到边x,y,长度为z,x所处的并查集为Sx,y所处的并查集为Sy: 对于任意u属于Sx,v属于Sy,我们可以知道u,v之间必连一条边 但是我们要在保证x,y之间的边属于唯 ...

  9. UEFI boot: how does that actually work, then?

    原文地址:https://www.happyassassin.net/2014/01/25/uefi-boot-how-does-that-actually-work-then/ 翻译:https:/ ...

  10. java基本类型和包装类型

          int 是基本类型,直接存数值 Integer是类,产生对象时用一个引用指向这个对象 Java把内存划分成两种:一种是栈内存,另一种是堆内存 在函数中定义的一些基本类型的变量和对象的引用变 ...