2024年最全vue项目中Echarts图表完整引入、按需加载以及修改主题色，今日头条 前端面试

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

]

})

}

}

}

看效果：

Echarts的条形图bar

缺点：如果是完整的引入Echarts，会额外的引入其他无用的配置文件，造成应用文件体积过大，资源加载耗时过长，影响用户体验。

二、Echarts 按需加载

---

1. 专门设置一个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

2. 在需要的组件内加载echarts，绘制图表

// … 与上面实例相同

按此方式打包的项目，会只加载引用你所使用的图表、标题、提示信息等组件，降低了应用文件体积，实现按需加载

三、引入插件babel-plugin-equire,配合实现Echarts按需引入

---

在上面的实例中，我们单独配置的echarts文件，需要引入对应的图表、标题、提示信息等，都需要我们手动进行加载，比较麻烦。引入babel-plugin-equire插件，方便使用。

1. 下载babel-plugin-equire

npm install babel-plugin-equire -D

or

yarn add babel-plugin-equire --dev

2. 在.babelrc文件中的配置

“plugins”: [

“… 其他插件”,

“equire”

]

3. 修改@/lib/echarts文件

// eslint-disable-next-line

const echarts = equire([

// 写上你需要的

‘bar’,

‘line’,

‘legend’,

‘title’

])

export default echarts

4. 和上面案例配置是相同的，可以更加愉快的玩耍…

三、Echarts 修改主题色加载

---

1、在main.js里引入echarts主题的js，一般在  node_modules—echarts—theme—macarons.js。  theme里边有各种各样的主题，任意选一种，这里我选的是macarons。引入：

import  ‘echarts/theme/macarons.js’

或者在https://echarts.apache.org/zh/theme-builder.html进行主题的配置然后，下载主题色

然后将下载的shine.js放到本地引入。 
2、在echarts初始化时，使用主题。

判断

回到题目，如果你真想检验一个人的水平。第一步先考察一下基本的编程基础，问几个基本的编程问题，可以和前端相关也可以无关。比如垃圾收集大致是怎么做的，setTimeout 大致做了什么（说会在另一个线程里执行回调的直接毙掉）。

第二步考察一下知识面，问问http、tcp的基本知识，dns是怎么工作的，或者常用框架的实现原理，看看候选人是不是除了自己的一亩三分地什么都不关心。

第三步考察hold业务逻辑的能力，从一个简单的注册页，或者查询页开始，先让说下代码的基本架构，然后需求、性能、可靠性、安全层层加码，看看能不能很快的反馈出解决方案。能对答如流的要么做过，要么对他来说这种复杂度的东西是小case。

前三步都没问题，基本上说明候选人已经还行了，但是行到什么程度，不知道。如果想找比较厉害的，就增加个第四步，亮点项目考察。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！

t/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！

[外链图片转存中…(img-O3C9t7jB-1715661583543)]

[外链图片转存中…(img-fIK3WExh-1715661583543)]