echarts中option的title

上一篇文章做了一個echarts的首秀,接下來的好多篇就開始講解echarts的option配置項

今天講option中的title

(這些都是我看過官網配置項,根據自己的理解寫出來的,但不一定全,但是我覺得最常用的,因為有的配置項我也沒用過,嘻嘻)

title,顧名思義,是圖表的標題,下面簡單程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id = "d1" style = "width: 400px;height:400px;"></div>
<script type="text/javascript" src = "js/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("d1"));//初始化畫布
var option = {
title:{
text:"echarts例項"
}
}
myChart.setOption(option);
</script>
</body>
</html>

結果如下:

這裡寫圖片描述

text選項是圖表標題的文字內容(以後解釋都寫在js註釋程式碼中)

上程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
</head>
<body>
<div id = "d1" style = "width: 400px;height:400px;"></div>
<script type="text/javascript" src = "js/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("d1"));//初始化畫布
var option = {
title:{
show:"true",//是否顯示標題,預設顯示,可以不設定
text:"echarts例項",//圖表標題文字內容
link:"http://echarts.baidu.com/",//點選標題內容要跳轉的連結
target:"blank",//跳轉連結開啟方式,blank是新視窗開啟,self是自身視窗開啟,跟a標籤一樣
textStyle:{//標題內容的樣式
color:'#e4393c',//京東紅
fontStyle:'normal',//主標題文字字型風格,預設normal,有italic(斜體),oblique(斜體)
fontWeight:"lighter",//可選normal(正常),bold(加粗),bolder(加粗),lighter(變細),100|200|300|400|500...
fontFamily:"san-serif",//主題文字字型,預設微軟雅黑
fontSize:18//主題文字字型大小,預設為18px
},
textAlign:'left',//標題文字水平對齊方式,建議不要設定,就讓他預設,想居中顯示的話,建議往下看
textBaseline:"top",//預設就好,垂直對齊方式,不要設定
subtext:"作者:前端林三哥",//主標題的副標題文字內容,如果需要副標題就配置這一項
sublink:"http://blog.csdn.net/zhaoxiang66",//點選副標題內容要跳轉的連結
subtarget:"blank",//同主標題,blank是新視窗開啟,self是自身視窗開啟
subtextStyle:{//副標題內容的樣式
color:'green',//綠色
fontStyle:'normal',//主標題文字字型風格,預設normal,有italic(斜體),oblique(斜體)
fontWeight:"lighter",//可選normal(正常),bold(加粗),bolder(加粗),lighter(變細),100|200|300|400|500...
fontFamily:"san-serif",//主題文字字型,預設微軟雅黑
fontSize:12//主題文字字型大小,預設為12px
},
padding:5,//各個方向的內邊距,預設是5,可以自行設定
itemGap:10,//主標題和副標題之間的距離,可自行設定
left:"center",//left 的值可以是像 20 這樣的具體畫素值,可以是像 '20%' 這樣相對於容器高寬的百分比,也可以是 'left', 'center', 'right',如果 left 的值為'left', 'center', 'right',元件會根據相應的位置自動對齊。
top:"center",//left 的值可以是像 20 這樣的具體畫素值,可以是像 '20%' 這樣相對於容器高寬的百分比,也可以是 'left', 'center', 'right',如果 left 的值為'left', 'center', 'right',元件會根據相應的位置自動對齊。
right:"auto",//right 的值可以是像 20 這樣的具體畫素值,可以是像 '20%' 這樣相對於容器高寬的百分比。
bottom:"auto",//bottom 的值可以是像 20 這樣的具體畫素值,可以是像 '20%' 這樣相對於容器高寬的百分比。
//left設定center標題會自動水平居中
//top設定center標題會自動垂直居中
backgroundColor:"#ccc",//標題背景色,預設透明,顏色可以使用 RGB 表示,比如 'rgb(128, 128, 128)' ,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六進位制格式,比如 '#ccc'
borderColor:"red",//標題的邊框顏色,顏色格式支援同backgroundColor
borderWidth:2,//標題邊框線寬,預設為0,可自行設定
shadowBlur: 10,//圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設定圖形的陰影效果。
shadowColor: "black",
shadowOffsetX: 0,
shadowOffsetY: 0,
}
}
myChart.setOption(option);
</script>
</body>
</html>

執行結果如下圖所示:

這裡寫圖片描述

title屬性就說到這裡啦,具體配置看js註釋程式碼就ok啦!