echarts学习之组件title笔记

我就是我 2022-05-22 09:07 227阅读 0赞

## echarts学习之组件title笔记 ##

> 首先看到这个单词，就明白是标题的意思，没错它就是标题，这没什么可说的，还是直接进入正题，讲讲关于echarts组件titile的一些属性元素
> 
> <table>  title  
>  <tbody> 
>   <tr> 
>    <th>id</th> 
>    <th><span style="font-weight:normal;"><span style="font-size:12px;"><span style="color:rgb(51,51,51);font-family:'Helvetica Neue', 'Segoe UI', Tahoma, Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;background-color:rgb(255,255,255);">组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件</span><span style="color:rgb(51,51,51);font-family:'Helvetica Neue', 'Segoe UI', Tahoma, Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;background-color:rgb(255,255,255);">。</span></span></span></th> 
>   </tr> 
>  </tbody> 
>  <tbody> 
>   <tr> 
>    <td>show</td> 
>    <td><span style="color:rgb(51,51,51);font-family:'Helvetica Neue', 'Segoe UI', Tahoma, Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;font-size:14px;background-color:rgb(255,255,255);">是否显示标题组件。</span></td> 
>   </tr> 
>   <tr> 
>    <td>text</td> 
>    <td><span style="color:rgb(51,51,51);font-family:'Helvetica Neue', 'Segoe UI', Tahoma, Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;font-size:14px;background-color:rgb(255,255,255);">主标题文本，支持使用&nbsp;</span><code style="font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:12.6px;color:rgb(41,60,85);">\n</code><span style="color:rgb(51,51,51);font-family:'Helvetica Neue', 'Segoe UI', Tahoma, Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;font-size:14px;background-color:rgb(255,255,255);">&nbsp;换行。</span></td> 
>   </tr> 
>   <tr> 
>    <td>link</td> 
>    <td><span style="color:rgb(51,51,51);font-family:'Helvetica Neue', 'Segoe UI', Tahoma, Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;font-size:14px;background-color:rgb(255,255,255);">主标题文本超链接。跟html的&lt;a&gt;标签作用一样</span></td> 
>   </tr> 
>   <tr> 
>    <td>target</td> 
>    <td>在设置了link文本的连接情况，跳转该链接的窗口打开方式，有两个值 
>     <ul style="font-family:'Helvetica Neue', 'Segoe UI', Tahoma, Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;list-style:none;color:rgb(51,51,51);font-size:14px;"> 
>      <li><p style="line-height:1.7em;"><code style="font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:12.6px;color:rgb(41,60,85);">'self'</code>&nbsp;当前窗口打开</p></li> 
>      <li><p style="line-height:1.7em;"><code style="font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:12.6px;color:rgb(41,60,85);">'blank'</code>&nbsp;新窗口打开</p></li> 
>     </ul></td> 
>   </tr> 
>   <tr> 
>    <td>suntext</td> 
>    <td>副标题</td> 
>   </tr> 
>   <tr> 
>    <td>textStyle</td> 
>    <td>主标题样式</td> 
>   </tr> 
>   <tr> 
>    <td>padding</td> 
>    <td>标题的内边距</td> 
>   </tr> 
>   <tr> 
>    <td>itemGrap</td> 
>    <td>主标题与副标题之间的间距</td> 
>   </tr> 
>   <tr> 
>    <td>zlevel</td> 
>    <td>&nbsp;所有图形的zlevel值，zlevel用于canvas分层，不同的zlevel值放在不同的canvas中，zlevel值大的canvas会放在值小的上面</td> 
>   </tr> 
>  </tbody> 
> </table>
> 
> <table> 
>  <tbody> 
>   <tr> 
>    <td>z</td> 
>    <td>默认值为2；组件所有图形的z值。控制图形的前后顺序。z值小的图形会被值大的图形覆盖</td> 
>   </tr> 
>   <tr> 
>    <td><p>left，reght</p><p>top，bottom</p></td> 
>    <td>标题里容器的左、右、上、下的边距，值可以是px像素，百分比%及center、left、right、top、bottom</td> 
>   </tr> 
>   <tr> 
>    <td>backgrouNdColor</td> 
>    <td>&nbsp;标题的背景颜色，默认为透明，值可以为颜色的十六进制 或 rgb（0，0，0），单词</td> 
>   </tr> 
>   <tr> 
>    <td>borderColor</td> 
>    <td>&nbsp;标题边框颜色</td> 
>   </tr> 
>   <tr> 
>    <td>borderWidth</td> 
>    <td>&nbsp;标题边框宽度</td> 
>   </tr> 
>   <tr> 
>    <td>borderRaduis</td> 
>    <td>&nbsp;标题的边框圆角半径</td> 
>   </tr> 
>   <tr> 
>    <td>shadowBlur</td> 
>    <td>&nbsp;图形阴影的迷糊大小</td> 
>   </tr> 
>   <tr> 
>    <td>shadowColor</td> 
>    <td>&nbsp;图形的阴影颜色</td> 
>   </tr> 
>   <tr> 
>    <td>shadowOffsetX</td> 
>    <td>&nbsp;阴影水平方向上的偏移</td> 
>   </tr> 
>   <tr> 
>    <td><br>shaowOffsetY</td> 
>    <td>&nbsp;阴影垂直方向上的的偏移</td> 
>   </tr> 
>  </tbody> 
> </table>
> 
> 在使用中并不需要用到全部的属性，根据需求去选择
> 
> 详情可去echarts官网看配置项手册[点击打开链][Link 1][接][Link 1]
> 
> 简单的实例
> 
>     <!DOCTYPE HTML>
>     <html>
>     	<head>
>     		<meta  charset="utf-8"/>
>     		<title>echarts之组件title</title>
>     		
>     		<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>
> 
>   
> 
> 
> 效果图
> 
> ![70][]  
>

[Link 1]: http://echarts.baidu.com/option.html#title.target
[70]: /images/20220522/ca0b71451a794767a24658b673c80d15.png