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

img
img
img

既有适合小白学习的零基础资料,也有适合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行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值