echarts学习之组件title笔记

echarts学习之组件title笔记

首先看到这个单词,就明白是标题的意思,没错它就是标题,这没什么可说的,还是直接进入正题,讲讲关于echarts组件titile的一些属性元素

title
id组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件
show是否显示标题组件。
text主标题文本,支持使用 \n 换行。
link主标题文本超链接。跟html的<a>标签作用一样
target在设置了link文本的连接情况,跳转该链接的窗口打开方式,有两个值
  • 'self' 当前窗口打开

  • 'blank' 新窗口打开

suntext副标题
textStyle主标题样式
padding标题的内边距
itemGrap主标题与副标题之间的间距
zlevel 所有图形的zlevel值,zlevel用于canvas分层,不同的zlevel值放在不同的canvas中,zlevel值大的canvas会放在值小的上面
z默认值为2;组件所有图形的z值。控制图形的前后顺序。z值小的图形会被值大的图形覆盖

left,reght

top,bottom

标题里容器的左、右、上、下的边距,值可以是px像素,百分比%及center、left、right、top、bottom
backgrouNdColor 标题的背景颜色,默认为透明,值可以为颜色的十六进制 或 rgb(0,0,0),单词
borderColor 标题边框颜色
borderWidth 标题边框宽度
borderRaduis 标题的边框圆角半径
shadowBlur 图形阴影的迷糊大小
shadowColor 图形的阴影颜色
shadowOffsetX 阴影水平方向上的偏移

shaowOffsetY
 阴影垂直方向上的的偏移

在使用中并不需要用到全部的属性,根据需求去选择

详情可去echarts官网看配置项手册点击打开链

简单的实例

<!DOCTYPE HTML>
<html>
	<head>
		<meta  charset="utf-8"/>
		<title>echarts之组件title</title>
		<!-- 引入echarts -->
		<script type="text/javascript" src="../js/echarts.js" ></script>
	</head>
	<body>
		<div id="title" style="width: 400px; height: 200px;"></div>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('title'));
			var option = {
				title:{
					//是否显示,默认true
					show:true,
					//标题文本
					text:'我的主标题',
					//主标题的超链接
					link:'https://www.baidu.com',
					//超链接的窗口打开方式,在新的一个窗口打开
					target:'blank',
					textStyle:{
						//主标题字体颜色
						color:'green',
						//主标题的字体风格,斜体加粗
						fontStyle:'oblique',
						//主题文字的字体
						fontFamily:'微软雅黑',
						//文字大小
						fontSize:24,
					
						
					},
					subtext:'我的副标题',
					//副标题样式
					subtextStyle:{
						color:'#FF4500',
						fontFamily:'微软雅黑',
						fontSize:15
					},
					//副标题超链接
					sublink:'https://www.baidu.com',
					//距离容器左边的距离,居中,九宫格布局
					left:'center',
					//背景颜色
					backgroundColor:'#7FFFAA',
					//标题的边框颜色
					borderColor:'#FFD700',
					//标题的边框宽度
					borderWidth:3,
					borderRadius:5,
					//主标题与副标题的间距,默认为10
					itemGap:20
					
				}
			};
			myChart.setOption(option);
			
		</script>
	</body>
</html>


效果图


阅读更多
换一批

没有更多推荐了,返回首页