Echarts折线图，柱状图等图表标题tittle居中显示的问题解决

查看网页元素的时候我们可以发现，echart每个图表都是封装好的，在一个canvas里，开发之初我觉得人家封装好的东西改起来一定很麻烦，作为一个后端人员对于前端的那些css样式真的不是很熟悉，每次想到要应产品需求做改动都一阵头大，细思极恐。开发毕竟是没有人权的，让改就得改，谁让我还得兼职前端的工作呢

我的需求是标题居中显示

百度了一下，发现很多人告诉在绘制图表的时候加入 textAlign或者textVerticalAlign实现标题居中，于是尝试了一下，然而并不好用，起码对于我并不适用。

DOM结构

绘制柱状图 

			drawColumnChart() {
				this.chartColumn = echarts.init(document.getElementById('chartColumn'));
				this.chartColumn.setOption({
					title: {
						text: '各数据库占有数据源情况柱状图',
						/*textVerticalAlign:'center'*/
						textAlign:'center'
					},
					tooltip: {},
					xAxis: {
						data: []
					},
					yAxis: {},
					series: [{
						name: '',
						type: 'bar',
						data: []
					}]
				});
			},

效果

 

我的解决办法是 使用了left:'center'，完美解决

			drawColumnChart() {
				this.chartColumn = echarts.init(document.getElementById('chartColumn'));
				this.chartColumn.setOption({
					title: {
						text: '各数据库占有数据源情况柱状图',
						/*textVerticalAlign:'center'*/
						/*textAlign:'center'*/
						left:'center'
					},
					tooltip: {},
					xAxis: {
						data: []
					},
					yAxis: {},
					series: [{
						name: '',
						type: 'bar',
						data: []
					}]
				});
			},

最终效果

 

听谁的也不如自己看官方文档：https://www.echartsjs.com/zh/option.html#title

参数分析

参数名称	参数描述	参数可选值
textAlign	整体（包括 text 和 subtext）的水平对齐	'auto'、'left'、'right'、'center'
textVerticalAlign	整体（包括 text 和 subtext）的垂直对齐	'auto'、'top'、'bottom'、'middle'
left	grid 组件离容器左侧的距离	'left', 'center', 'right'

 

通过观察会发现，textAlign和textVerticalAlign作用于整体，而left作用于单个组件，恰恰标题就是一个组件，那么针对我的需求，left会生效是毋庸置疑的

echarts做的还是很好的，好多功能通过参数的设置都是可以实现的，期待后续发掘新的功能。

如果觉得本文对你还有点帮助的话，麻烦给个关注，点个赞吧