Echarts中常用的参数总结以及参数自定义示例_echarts series参数(1)

2401_84183451

于 2024-05-14 15:11:46 发布

阅读量503

点赞数 4

分类专栏：程序员文章标签：大数据面试学习

本文链接：https://blog.csdn.net/2401_84183451/article/details/138856247

版权

程序员专栏收录该内容

124 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合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坐标的值

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行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**