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
} 

未完待续…