结束
一次完整的面试流程就是这样啦,小编综合了腾讯的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析,分享给小伙伴们,有没有需要的小伙伴们都去领取!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
],
};
只需要把类型设置为line
即可
这里
xAxis
和yAxis
的type
属性都可以隐去不写。因为坐标轴的默认类型是数值型,而xAxis
指定了类目型的data
,所以ECharts
也能识别出这是类目型的坐标轴。
为了让大家更容易理解,我们特意写了
type
。在实际的应用中,如果是'value'
类型,也可以省略不写。
如果我们希望折线图在横坐标和纵坐标上都是连续的,即在笛卡尔坐标系中,只要把 series
的 data
每个数据用一个包含两个元素的数组表示就行了。
option = {
xAxis: {},
yAxis: {},
series: [
{
data: [
[1, 2],
[2, 1],
[3, 4],
],
type: “line”,
},
],
};
折线图样式
折线图中折线的样式可以通过 lineStyle
设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等,具体的可以参考配置项手册 series.lineStyle
了解。
这里,我们以设置颜色(color)、线宽(width)和折线类型(type)为例说明。
option = {
xAxis: {
data: [“a”, “b”, “c”, “d”, “e”, “f”],
},
yAxis: {},
series: {
data: [1, 2, 3, 4, 5, 6],
type: “line”,
lineStyle: {
normal: {
color: “red”,
width: 3,
type: “dashed”,
},
},
},
};
数据点样式
数据点的样式可以通过 series.itemStyle
指定填充颜色(color)、描边颜色(borderColor)、描边宽度(borderWidth)、描边类型(borderType)、阴影(shadowColor)、不透明度(opacity)等。
案例:
option = {
xAxis: {
data: [“a”, “b”, “c”, “d”, “e”, “f”],
},
yAxis: {},
series: {
data: [1, 2, 3, 4, 5, 6],
type: “line”,
lineStyle: {
normal: {
opacity: 0,
},
},
},
};
在系列中,这数据点的标签通过 series.label
属性指定。
如果将 label
下的 show
指定为true
,则表示该数值默认时就显示;
如果为 false
,而 series.emphasis.label.show
为 true
,则表示只有在鼠标移动到该数据时,才显示数值。
option = {
xAxis: {
data: [“a”, “b”, “c”, “d”, “e”, “f”],
},
yAxis: {},
series: {
data: [1, 2, 3, 4, 5, 6],
type: “line”,
label: {
show: false,
position: “top”,
textStyle: {
fontSize: 20,
},
},
emphasis: {
label: {
show: true,
},
},
},
};
在一个系列中,可能一个横坐标对应的取值是“空”的,将其设为 0 有时并不能满足我们的期望–空数据不应被其左右的数据连接。
在 ECharts 中,我们使用字符串 '-'
表示空数据,这对其他系列的数据也是适用的。
option = {
xAxis: {
data: [“a”, “b”, “c”, “d”, “e”, “f”],
},
yAxis: {},
series: {
data: [1, 2, ‘-’, 4, 5, 6],
type: “line”,
},
};
====================================================================
与堆叠柱状图类似,堆叠折线图也是用系列的 stack
设置哪些系列堆叠在一起。
option = {
xAxis: {
data: [“a”, “b”, “c”, “d”, “e”, “f”],
},
yAxis: {},
series: [
{
data: [1, 2, 3, 4, 5, 10],
type: “line”,
stack: “x”,
},
{
data: [6, 5, 4, 3, 2, 1],
type: “line”,
stack: “x”,
},
],
};
但是不同的是,如果不加说明的话,我们很难判断出这是一个堆叠折线图,还是一个普通的折线图。
所以,对于堆叠折线图而言,一般建议使用区域填充色以表明堆叠的情况。
option = {
xAxis: {
data: [“a”, “b”, “c”, “d”, “e”, “f”],
},
yAxis: {},
series: [
{
data: [1, 2, 3, 4, 5, 10],
type: “line”,
stack: “x”,
areaStyle: {},
},
{
data: [6, 5, 4, 3, 2, 1],
type: “line”,
stack: “x”,
areaStyle: {},
},
],
};
====================================================================
当然你也可以不堆叠,这样更适合对比
刷面试题
刷题的重要性,不用多说。对于应届生或工作年限不长的人来说,刷面试题一方面能够尽可能地快速自己对某个技术点的理解,另一方面在面试时,有一定几率被问到相同或相似题,另外或多或少也能够为自己面试增加一些自信心,可见适当的刷题是很有必要的。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
前端字节跳动真题解析
-
【269页】前端大厂面试题宝典
最后平时要进行自我分析与评价,做好职业规划,不断摸索,提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难,摆好心态,做好准备,你也可以的。