<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>標(biāo)題</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"));//初始化畫(huà)布
????????var option = {
????????????title:{
????????????????show:"true",//是否顯示標(biāo)題，默認(rèn)顯示，可以不設(shè)置
????????????????text:"echarts實(shí)例",//圖表標(biāo)題文本內(nèi)容
????????????????link:"http://echarts.baidu.com/",//點(diǎn)擊標(biāo)題內(nèi)容要跳轉(zhuǎn)的鏈接
????????????????target:"blank",//跳轉(zhuǎn)鏈接打開(kāi)方式，blank是新窗口打開(kāi)，self是自身窗口打開(kāi)，跟a標(biāo)簽一樣
????????????????textStyle:{//標(biāo)題內(nèi)容的樣式
????????????????????color:'#e4393c',//京東紅
????????????????????fontStyle:'normal',//主標(biāo)題文字字體風(fēng)格，默認(rèn)normal，有italic(斜體),oblique(斜體)
????????????????????fontWeight:"lighter",//可選normal(正常)，bold(加粗)，bolder(加粗)，lighter(變細(xì))，100|200|300|400|500...
????????????????????fontFamily:"san-serif",//主題文字字體，默認(rèn)微軟雅黑
????????????????????fontSize:18//主題文字字體大小，默認(rèn)為18px
????????????????},
????????????????textAlign:'left',//標(biāo)題文本水平對(duì)齊方式，建議不要設(shè)置，就讓他默認(rèn)，想居中顯示的話，建議往下看
????????????????textBaseline:"top",//默認(rèn)就好,垂直對(duì)齊方式,不要設(shè)置
????????????????subtext:"",//主標(biāo)題的副標(biāo)題文本內(nèi)容，如果需要副標(biāo)題就配置這一項(xiàng)
????????????????sublink:"http://blog.csdn.net/zhaoxiang66",//點(diǎn)擊副標(biāo)題內(nèi)容要跳轉(zhuǎn)的鏈接
????????????????subtarget:"blank",//同主標(biāo)題，blank是新窗口打開(kāi)，self是自身窗口打開(kāi)
????????????????subtextStyle:{//副標(biāo)題內(nèi)容的樣式
????????????????????color:'green',//綠色
????????????????????fontStyle:'normal',//主標(biāo)題文字字體風(fēng)格，默認(rèn)normal，有italic(斜體),oblique(斜體)
????????????????????fontWeight:"lighter",//可選normal(正常)，bold(加粗)，bolder(加粗)，lighter(變細(xì))，100|200|300|400|500...
????????????????????fontFamily:"san-serif",//主題文字字體，默認(rèn)微軟雅黑
????????????????????fontSize:12//主題文字字體大小，默認(rèn)為12px
????????????????},
????????????????padding:5,//各個(gè)方向的內(nèi)邊距，默認(rèn)是5，可以自行設(shè)置
????????????????itemGap:10,//主標(biāo)題和副標(biāo)題之間的距離，可自行設(shè)置
????????????????left:"center",//left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，也可以是 'left', 'center', 'right',如果 left 的值為'left', 'center', 'right'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。
????????????????top:"center",//left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，也可以是 'left', 'center', 'right',如果 left 的值為'left', 'center', 'right'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。
????????????????right:"auto",//right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。
????????????????bottom:"auto",//bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。
????????????????//left設(shè)置center標(biāo)題會(huì)自動(dòng)水平居中
????????????????//top設(shè)置center標(biāo)題會(huì)自動(dòng)垂直居中
????????????????backgroundColor:"#ccc",//標(biāo)題背景色，默認(rèn)透明，顏色可以使用 RGB 表示，比如 'rgb(128, 128, 128)' ，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六進(jìn)制格式，比如 '#ccc'
????????????????borderColor:"red",//標(biāo)題的邊框顏色，顏色格式支持同backgroundColor
????????????????borderWidth:2,//標(biāo)題邊框線寬，默認(rèn)為0，可自行設(shè)置
????????????????shadowBlur: 10,//圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設(shè)置圖形的陰影效果。
????????????????shadowColor: "black",
????????????????shadowOffsetX: 0,
????????????????shadowOffsetY: 0,
????????????}
????????}
????????myChart.setOption(option);
????</script>
</body>
</html>
原文：https://blog.csdn.net/zhaoxiang66/article/details/73574620
