最后
我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
篇幅有限，仅展示部分截图：
name: “湖南”,
value: 6,
},
{
name: “安徽”,
value: 96,
},
{
name: “山东”,
value: 75,
},
{
name: “新疆”,
value: 45,
},
{
name: “江苏”,
value: 15,
},
{
name: “浙江”,
value: 8,
},
{
name: “江西”,
value: 78,
},
{
name: “湖北”,
value: 78,
},
{
name: “广西”,
value: 36,
},
{
name: “甘肃”,
value: 25,
},
{
name: “山西”,
value: 140,
},
{
name: “内蒙古”,
value: 85,
},
{
name: “陕西”,
value: 85,
},
{
name: “吉林”,
value: 74,
},
{
name: “福建”,
value: 20,
},
{
name: “贵州”,
value: 74,
},
{
name: “广东”,
value: 47,
},
{
name: “青海”,
value: 45,
},
{
name: “西藏”,
value: 41,
},
{
name: “四川”,
value: 3,
},
{
name: “宁夏”,
value: 7,
},
{
name: “海南”,
value: 7,
},
{
name: “台湾”,
value: 200,
},
{
name: “香港”,
value: 2,
},
{
name: “澳门”,
value: 5,
}
],
//指定图表的配置项和数据
option: {
//标题组件
title: {
show: true,
text: ‘全国各省份旅游景点(已评级)数量’,
subtext: ‘截至到2021年12月’,
left: “center”,
top: 16,
},
//提示框组件
tooltip: {
show: true,
//触发类型：数据项图形触发
trigger: ‘item’,
padding: 10,
borderWidth: 1,
borderColor: ‘#409eff’,
backgroundColor: ‘rgba(255,255,255,0.4)’,
textStyle: {
color: ‘#000000’,
fontSize: 12
},
//提示框内容格式器
formatter: (e) => {
let data = e.data;
//此处将各等级景点数量表示为0-10内的随机整数
data.five = Math.random() * 10 | 0;
data.four = Math.random() * 10 | 0;
data.three = Math.random() * 10 | 0;
data.two = Math.random() * 10 | 0;
data.one = Math.random() * 10 | 0;
//景点数量 - 五个等级之和
data.number = data.five + data.four + data.three + data.two + data.one;
//字符串模板
let context = `
${data.name}
景点数量 : ${data.number}处
5A级 : ${data.five}处
4A级 : ${data.four}处
3A级 : ${data.three}处
2A级 : ${data.two}处
1A级 : ${data.one}处
`;
return context;
}
},
//视觉映射组件(左下角)
visualMap: {
show: true,
left: 26,
bottom: 40,
showLabel: true,
// 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
calculable: false,
// 拖拽时，是否实时更新
realtime: true,
align: ‘left’,
//各颜色代表的区域
pieces: [
{
gte: 100,
label: “> 100”,
color: “#FDB669”
},
{
gte: 50,
lt: 99,
label: “50 - 99”,
color: “#FECA7B”
},
{
gte: 30,
lt: 49,
label: “30 - 49”,
color: “#FEE191”
},
{
gte: 10,
lt: 29,
label: “10 - 29”,
color: “#FFF0A8”
},
{
lt: 9,
label: ‘< 10’,
color: “#FFFFBF”
}
]
},
//地理坐标系组件
geo: {
//使用 registerMap 注册的地图名称
map: “china”,
//是否开启鼠标缩放和平移漫游
roam: true,
//当前视角缩放比例
zoom: 1,
//滚轮缩放的极限控制
scaleLimit: {
min: 1, //最小1倍
max: 3 //最大3倍
},
//地图组件离容器的距离
top: 90,
left: ‘center’,
//图形上的文本标签
label: {
show: true,
fontSize: “11”
},
//地图区域的多边形 图形样式
itemStyle: {
borderColor: “rgba(0, 0, 0, 0.2)”,
shadowColor: ‘rgba(0, 0, 0, 0.2)’,
shadowBlur: 10,
// 高亮状态(鼠标移入后)的多边形和标签样式
emphasis: {
areaColor: “#f98333”,
shadowOffsetX: 2,
shadowOffsetY: 2,
},
}
},
series: [
{
type: “map”,
roam: true,
geoIndex: 0,
data: ‘’,
label: {
show: true,
}
}
]
},
};
},
methods: {
//定义方法 draw_map 绘制中国地图
draw_map() {
let myChart = this.$echarts.init(document.getElementById(‘map_cn’));
//高亮轮播展示
var hourIndex = 0;
var carouselTime = null;
//setInterval() 可在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除
//使用setInterval方法后,必须使用箭头函数而不能写function,否则后续在该方法中无法调用data中的数据
//carouselTime =setInterval(function(){ //错误写法
carouselTime = setInterval(() => {
//dispatchAction echarts的API：触发图表行为
myChart.dispatchAction({
type: “downplay”, //downplay 取消高亮指定的数据图形
seriesIndex: 0
});
myChart.dispatchAction({
type: “highlight”, //highLight 高亮指定的数据图形
seriesIndex: 0, //系列index
dataIndex: hourIndex //数据index
});
总结
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
type: “highlight”, //highLight 高亮指定的数据图形
seriesIndex: 0, //系列index
dataIndex: hourIndex //数据index
});
总结
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-hF132gT3-1715838737150)]
[外链图片转存中…(img-DlYJPCRv-1715838737151)]
4660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
