1.標題元件的基本使用

圖示元件使用title節點進行配置。

標題分為主標題和副標題，
主標題的文字內容使用 'text' 屬性進行設定
副標題使用 'subtext' 屬性進行設定

var option = {
    title:{ 
        text:"我是標題",
        subtext:"我是副標題"
    }
}

2.標題元件的位置

標題元件預設在左上角，可以像css一樣為其設定位置

left/right/top/bottom：分別設定標題元件位於4個方向的距離，值可以是數字(代表具體的畫素)，百分比，關鍵字（水平居中使用center，垂直居中使用middle）

水平垂直居中

var option = {
        title: {
            text: "我是標題",
            subtext: "我是副標題",
            top:'middle',
            left:'center'
        }
    }

使用百分比

var option = {
        title: {
            text: "我是標題",
            subtext: "我是副標題",
            top:'50%',
            left:'50%'
        }
    }
 

使用數字（容器寬高600*300）

var option = {
        title: {
            text: "我是標題",
            subtext: "我是副標題",
            left:300,//按照當前容器寬高 相當於 50%
            top:150
        }
    }

3.多個標題元件

一個圖表可以有一個或多個標題元件，每個標題元件對應一個配置物件，當有多個標題元件時，使用陣列將其包裹起來，例如：

配置多個標題元件

var option = {
        title: [//含有多個標題元件時，使用陣列進行包裹
            {//每個元件就是一個物件
                text: "我是標題1",
                subtext: "我是副標題1",
                left: 150,
                top: 100
            },
            {//每個元件就是一個物件
                text: "我是標題2",
                subtext: "我是副標題2",
                left: 300,
                top: 150
            }
        ]
    }
 

4.顯示/隱藏標題元件

如果沒有配置標題元件，則該元件沒有顯示/隱藏的說法（都不存在，何來隱藏/顯示）
如果配置了標題元件，則該元件預設顯示。
如果配置了元件，但是某些情況下需要動態切換顯示/隱藏，就需要用到 'show' 屬性。

'show' 屬性的值是布林值，通過他來切換標題的元件的顯示/隱藏

 var option = {
        title: [//含有多個標題元件時，使用陣列進行包裹
            {//每個元件就是一個物件
                text: "我是標題1",
                subtext: "我是副標題1",
                left: 150,
                top: 100,
                show:true,//預設展示
            },
            {//每個元件就是一個物件
                text: "我是標題2",
                subtext: "我是副標題2",
                left: 300,
                top: 150,
                show:false,//預設隱藏
            }
        ]
    }

使用js動態切換標題元件的顯示/隱藏

<div class="btn_box">
    <button type="button" class="btn btn-primary" onclick="showTitle(0)">標題1切換顯示/隱藏</button>
    <button type="button" class="btn btn-primary" onclick="showTitle(1)">標題2切換顯示/隱藏</button>
</div>

function showTitle(index){
    //取反
    option.title[index].show = !option.title[index].show
    //更新圖表
    charts.setOption(option)
}

5.標題元件的盒模型？

標題元件和html的元素一樣，有背景色，內邊距，邊框，陰影等樣式可以設定，具體如下：

(1)背景色
backgroundColor:'red'

(2)內邊距
padding：10

(3)邊框系列
邊框大小：borderWidth
邊框顏色：borderColor
邊框圓角:borderRadius

(4)陰影系列
陰影的模糊大小：shadowBlur
陰影顏色：shadowColor
陰影偏移：shadowOffsetX/shadowOffsetY

var option = {
        title: [//含有多個標題元件時，使用陣列進行包裹
            {//每個元件就是一個物件
                text: "我是標題1",
                subtext: "我是副標題1",
                left: 150,
                top: 100,
                show:true,//預設展示
                backgroundColor:'red',//紅色背景
                padding:5,//內邊距
                borderWidth:5,//邊框寬度
                borderColor:'yellow',//邊框顏色
                borderRadius:1,//邊框圓角
                shadowBlur:1,//陰影大小
                shadowColor:'#666',//陰影顏色
                shadowOffsetX:1,//陰影偏移
                shadowOffsetY:1,//陰影偏移
            },
            {//每個元件就是一個物件
                text: "我是標題2",
                subtext: "我是副標題2",
                left: 300,
                top: 150,
                show:true,
                backgroundColor:'lightblue',//淺藍背景
                padding:20,//內邊距
                borderWidth:20,//邊框寬度
                borderColor:'orange',//邊框顏色
                borderRadius:5,//邊框圓角
                shadowBlur:20,//陰影大小
                shadowBlur:10,//陰影大小
                shadowColor:'#666',//陰影顏色
                shadowOffsetX:5,//陰影偏移
                shadowOffsetY:5,//陰影偏移
            }
        ]
    }

6.文字樣式

主標題的文字樣式（顏色，斜體，加粗，字型大小）都統一配置到textStyle這個物件中。
而副標題的文字樣式（顏色，斜體，加粗，字型大小）則統一配置到subtextStyle這個物件中。

PS:其實textStyle是一個通用的配置項，只要有文字的地方就可以對他進行配置，不僅僅侷限在某個元件或者某個節點中。

var option = {
        title: [//含有多個標題元件時，使用陣列進行包裹
            {//每個元件就是一個物件
                text: "我是標題1",
                subtext: "我是副標題1",
                left: 150,
                top: 100,
                textStyle:{//主標題文字樣式
                    color:'red',//字型顏色
                    fontSize:20,//字型大小
                    fontStyle:'italic',//斜體
                    fontWeight:500,//加粗
                }
            },
        ]
    }

7.元件層級

當多個標題疊加在一起時，預設情況下後面的元件會覆蓋前面的元件，如果想改變這種設定，可以配置 'z' 屬性（相當於css裡面的z-index），來改變圖形的前後順序

定位的位置一致時，預設的效果（藍色在後面，所以藍色蓋住了紅色）

var option = {
        title: [//含有多個標題元件時，使用陣列進行包裹
            {//每個元件就是一個物件
                text: "我是標題1",
                left: 150,//定位一致
                top: 100,//定位一致
                subtext: '我是副標題1',
                backgroundColor:'red',//紅
            },
            {//每個元件就是一個物件
                text: "我是標題2",
                left: 150,//定位一致
                top: 100,//定位一致
                subtext: '我是副標題2',
                backgroundColor:'blue',//藍
            },
        ]
    }

//改變 'z' 屬性（預設是2 建議設定時10起步）

var option = {
        title: [//含有多個標題元件時，使用陣列進行包裹
            {//每個元件就是一個物件
                text: "我是標題1",
                left: 150,//定位一致
                top: 100,//定位一致
                subtext: '我是副標題1',
                backgroundColor:'red',
                z:10,//設定層級
            },
            {//每個元件就是一個物件
                text: "我是標題2",
                left: 150,//定位一致
                top: 100,//定位一致
                subtext: '我是副標題2',
                backgroundColor:'blue',
            },
        ]
    }