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阴影垂直方向上的的偏移 在使用中并不需要用到全部的属性，根据需求去选择
简单的实例
<!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>
效果图
