// Y轴
yAxis: {},
// 数据
series: [
{
name: ‘衣服’,
type: ‘bar’,
data: [120, 100, 440, 320]
},
{
name: ‘帽子’,
type: ‘bar’,
data: [200, 120, 240, 330]
},
{
name: ‘bar’,
type: ‘line’,
data: [120, 200, 240, 260, 300]
},
{
name: ‘bar’,
type: ‘line’,
data: [120, 200, 300, 140, 260]
}
]
})
}
}
}
看效果:
Echarts的条形图bar
缺点:如果是完整的引入Echarts,会额外的引入其他无用的配置文件,造成应用文件体积过大,资源加载耗时过长,影响用户体验。
二、Echarts 按需加载
- 专门设置一个echarts配置文件
// 文件路径 @/lib/echarts.js 自行配置
// 加载echarts,注意引入文件的路径
import echarts from ‘echarts/lib/echarts’
// 再引入你需要使用的图表类型,标题,提示信息等
import ‘echarts/lib/chart/bar’
import ‘echarts/lib/chart/line’
import ‘echarts/lib/component/legend’
import ‘echarts/lib/component/title’
export default echarts
- 在需要的组件内加载echarts,绘制图表
// … 与上面实例相同
按此方式打包的项目,会只加载引用你所使用的图表、标题、提示信息等组件,降低了应用文件体积,实现按需加载
三、引入插件babel-plugin-equire,配合实现Echarts按需引入
在上面的实例中,我们单独配置的echarts文件,需要引入对应的图表、标题、提示信息等,都需要我们手动进行加载,比较麻烦。引入babel-plugin-equire插件,方便使用。
- 下载babel-plugin-equire
npm install babel-plugin-equire -D
or
yarn add babel-plugin-equire --dev
- 在.babelrc文件中的配置
“plugins”: [
“… 其他插件”,
“equire”
]
- 修改@/lib/echarts文件
// eslint-disable-next-line
const echarts = equire([
// 写上你需要的
‘bar’,
‘line’,
‘legend’,
这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」,内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中,共计111道
HTML
-
HTML5有哪些新特性?
-
Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?
-
如何实现浏览器内多个标签页之间的通信?
-
⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元 素和块级元素有什么区别?
-
简述⼀下src与href的区别?
-
cookies,sessionStorage,localStorage 的区别?
-
HTML5 的离线储存的使用和原理?
-
怎样处理 移动端 1px 被 渲染成 2px 问题?
-
iframe 的优缺点?
-
Canvas 和 SVG 图形的区别是什么?
JavaScript
-
问:0.1 + 0.2 === 0.3 嘛?为什么?
-
JS 数据类型
-
写代码:实现函数能够深度克隆基本类型
-
事件流
-
事件是如何实现的?
-
new 一个函数发生了什么
-
什么是作用域?
-
JS 隐式转换,显示转换
-
了解 this 嘛,bind,call,apply 具体指什么
-
手写 bind、apply、call
-
setTimeout(fn, 0)多久才执行,Event Loop
-
手写题:Promise 原理
-
说一下原型链和原型链的继承吧
-
数组能够调用的函数有那些?
-
PWA使用过吗?serviceWorker的使用原理是啥?
-
ES6 之前使用 prototype 实现继承
-
箭头函数和普通函数有啥区别?箭头函数能当构造函数吗?
-
事件循环机制 (Event Loop)