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>效果圖
