echarts 解析

本文主要介紹echart的使用。

一、標題組件 tittle

title:{
    show: true,	//是否顯示標題組件
	text: '主標題',
	link: 'https://www.vitian.vip',		// 超文本鏈接
	target: 'blank',		// 'self' 當前頁打開 'blank' 新窗口打開
	textStyle:{    //內容樣式
		color: '#333', 	// 字體顏色。默認'#333'
		fontStyle: 'normal', 	// 字體風格。默認'normal'，可選'italic'、‘oblique’
		fontWeight:  'normal', 	// 字體風格。默認'normal'，可選'bold'、‘bolder’和'lighter' 以及100|200...
		fontFamily: 'sans-serif',  	// 字體系列。默認'sans-serif' 還可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
		fontSize: 18,  	// 字體大小
		lineHeight: '56' 	//行高
		width: '' 	//寬度。一般不指定
		height: ''  	//高度。一般不指定
		textBorderColor: 'transparent',  	//文字描邊顏色。默認透明
		textBorderWidth: '0', 	//文字描邊寬度。默認0
		textShadowColor: 'transparent',  	//文字陰影顏色。默認透明
		textShadowBlur: '0',  	//文字陰影長度。默認0
		textShadowOffsetX: '0',  	//文字陰影X偏移。默認0
		textShadowOffsetY: '0',  	//文字陰影Y偏移。默認0
	},
	subtext: '副標題',
	sublink: ‘’，
	subtarget: '',
	subtextStyle: {},
	textAlign: 'auto',  	// 水平對齊。默認'auto'。可選'left'、'right'、'center'
	textVerticalAlignAlign: 'auto',  	// 垂直對齊。默認'auto'。可選'top'、'center'、'bottom'
	triggerEvent: false, 	//是否觸發事件
	padding: [5,5,5,5], 	//內邊距
	itemGap: 10, 	//主副標題之前的間距
	zlevel: 0, 		//所有圖形的層級值
	z:0, //組件的圖形層級，優先級低於zlevel
	left: 'auto',
	top: 'auro',
	right: 'auto',
	bottom: 'auto',
	backgroundColor: 'transparent',  	//背景色
	borderColor: 'transparent',  	//描邊顏色。默認透明
	borderWidth: '0', 	//描邊寬度。默認0
	shadowColor: 'transparent',  	//陰影顏色。默認透明
	shadowBlur: '0',  	//陰影長度。默認0
	shadowOffsetX: '0',  	//陰影X偏移。默認0
	shadowOffsetY: '0',  	//陰影Y偏移。默認0
}

提示：上述比較常用的是text和textStyle。上述組件參數名除了副標題外，皆屬於通用，後面的組件不在重複。

二、圖例組件 legend

legend: {
	type: '',  	//圖例的類型。 可選：plain 普通圖例、scroll 可滾動翻頁圖例
	orient: 'horizontal',  	//圖標佈局朝向， 默認：‘horizontal’。可選：vertical
} 

未完待續…