Echarts折線圖，柱狀圖等圖表標題tittle居中顯示的問題解決

查看網頁元素的時候我們可以發現，echart每個圖表都是封裝好的，在一個canvas裏，開發之初我覺得人家封裝好的東西改起來一定很麻煩，作爲一個後端人員對於前端的那些css樣式真的不是很熟悉，每次想到要應產品需求做改動都一陣頭大，細思極恐。開發畢竟是沒有人權的，讓改就得改，誰讓我還得兼職前端的工作呢

我的需求是標題居中顯示

百度了一下，發現很多人告訴在繪製圖表的時候加入 textAlign或者textVerticalAlign實現標題居中，於是嘗試了一下，然而並不好用，起碼對於我並不適用。

DOM結構

<!--柱狀圖-->
<el-col :span="12">
	<div id="chartColumn" style="width:100%; height:400px;"></div>
</el-col>

繪製柱狀圖 

			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做的還是很好的，好多功能通過參數的設置都是可以實現的，期待後續發掘新的功能。

如果覺得本文對你還有點幫助的話，麻煩給個關注，點個贊吧