既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新
### 5.xAxis
xAxis :x轴设置
* name:单位
* splitLine:网格线
+ show:false (去除网格线)
* data:x轴坐标显示的数据,数组类型
* axisLine:设置x轴的轴线
+ show:true(设置显示)
+ lineStyle:设置轴线的样式
- color:颜色
- width:宽度
- type:线条类型
- axisLabel:设置x轴文字样式
- textStyle:文字样式,对象类型
- show:是否展示
- fontSize:字体大小
- color:文字颜色
- formatter:自定义文字,后面跟一个函数,默认会一个参数,x坐标的值
- textStyle:文字样式,对象类型
xAxis: {
type: "value",
// x轴的名字,可以理解成单位
name: "单位(K)",
nameTextStyle: {
// x轴的名字的样式相关
color: "#BFBFBF",
nameLocation: "start",
},
splitLine: {
//去除网格线
show: false,
},
//去除网格区域,否则会有一片区域
splitArea: { show: false },
data: [0, 5000, 10000, 15000, 20000, 25000, 30000, 35000],
axisLine: {
// 把x轴从实线变成虚线
show: true,
lineStyle: {
// 设置x轴线条样式的颜色
color: "#BDBDBD",
width: 1,
type: "solid",
},
},
axisLabel: {
formatter: function (value) {
return value >= 5000 ? parseInt(value / 1000) + "K" : value;
},
scale: true, // 设置数据自动缩放
}
},
### 6.yAxis
* yAxis:与x轴基本同理
### 7.series
series:图标系列,对象类型
* type:line(图标类型为线性图标)
* smooth:true(设置折线为光滑)
* name:图标名称
* areaStyle:图标区域的样式(本文中的图标设置的为渐进色)
* data:图标的数据
* markLine:基线
* symbol:none(去掉基线的箭头)
* lable:基线的文字设置
+ position:基线文字位置(start,middle,end)
+ show:是否显示基线文字
+ formatter:基线文字内容
* data:设置基线(Array类型)
+ silent:鼠标悬停(true/false)
+ lineStyle:基线线条设置,对象类型
- type:solid(基线线条类型)
- color:基线线条颜色
- yAxis:y轴基线的值
series: [
{
data: this.trendLineData.map(item => item.defenceScore),
type: ‘line’,
smooth: true,
name: “答辩评分”,
areaStyle: {
normal: {
opacity: 0.3,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: ‘#679CF6’
}, {
offset: 1,
color: ‘#fff’
}])
}
},
// 基线设置
markLine: {
symbol: “none”,
data: [{
silent: false,
lineStyle: {
type: “solid”,
color: “#E34949”,
},
yAxis: 3.5
},
{
silent: false,
lineStyle: {
type: “solid”,
color: “#3BC9A9”,
},
yAxis: 4
}
]
}
},
],
## 附:常见问题
### 1、自定义X轴文字(文字替换)
axisLabel: {
formatter: function (value) {
return value >= 5000 ? parseInt(value / 1000) + “K” : value;
},
scale: true, // 设置数据自动缩放,要不然数据多的话就堆一块了
}
### 2、自定义X轴文字(文字换行)
其中`this.trendLineData`为后端数据,其实就是将x轴的类目项文字可以动态换行
formatter: (value) => {
if (this.trendLineData.length > 2) {
//拼接加\n返回的类目项
var ret = "";
//每项显示文字个数
var maxLength = 12;
//X轴类目项的文字个数
var valLength = value.length;
//类目项需要换行的行数
var rowN = Math.ceil(valLength / maxLength);
if (rowN > 1)
{
for (var i = 0; i < rowN; i++) {
//每次截取的字符串
var temp = "";
//开始截取的位置
var start = i \* maxLength;
//结束截取的位置
var end = start + maxLength;
//这里也可以加一个是否是最后一行的判断
temp = value.substring(start, end) + "\n";
//拼接最终的字符串
ret += temp;
}
return ret;
}
else {
return value;
}
} else {
return value;
}
}
### 3、自定义tooltip
tooltip: {
trigger: 'axis',
// 显示延迟,添加显示延迟可以避免频繁切换,单位ms
showDelay: 200,
// 坐标轴指示器,坐标轴触发有效
axisPointer: {
// 默认为直线,可选为:'line' | 'shadow'
type: 'shadow',
shadowStyle: {
shadowBlur: 1,
opacity: 0.3
}
},
formatter: function (data) {
var res = "<div style='display:flex;'>";
res += "<div class='left' >"
res += '答辩数' + '</br>'
data.forEach(item => {
item.value = item.value ? item.value : 0;
if (item.seriesType == 'bar') {
res += item.marker + item.seriesName + '答辩数' + ':' + item.value + '</br>';
}
});
res += " </div>"
res += "<div class='right' style='margin-left:20px'>"
res += '分数' + '</br>'
data.forEach(item => {
item.value = item.value ? item.value : 0;
if (item.seriesType == 'line') {
res += item.marker + item.seriesName + (item.seriesName == '总体' ? '平均分' : '分数') + ':' + item.value + '</br>';
}
});
res += " </div>"
res += " </div>"
return res
}
},
结果如图所示:
![在这里插入图片描述](https://img-blog.csdnimg.cn/fb2e75a327204299ba503d21566e03a6.png)
![img](https://img-blog.csdnimg.cn/img_convert/b139903a66116c151f2ba5830d4dab30.png)
![img](https://img-blog.csdnimg.cn/img_convert/6ebf50842a1ce86dfcc738d16dec86de.png)
**网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**
**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**
片转存中...(img-PXgOEQjU-1715670684127)]
**网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**
**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**