<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- jquery cdn引入 -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- echarts 引入 -->
<script src="echarts.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="main" style="width:500px;height:500px;"></div>
<script>
var myChart=echarts.init(document.getElementById('main'));
//init初始化接口，返回ECharts實例，其中dom為圖表所在節點
var option = {
//標題
title : {
show:true,//顯示策略，默認值true,可選為：true（顯示） | false（隱藏）
text: '主標題',//主標題文本，'\n'指定換行
link:'',//主標題文本超鏈接,默認值true
target: null,//指定窗口打開主標題超鏈接，支持'self' | 'blank'，不指定等同為'blank'（新窗口）
subtext: '副標題',//副標題文本，'\n'指定換行
sublink: '',//副標題文本超鏈接
subtarget: null,//指定窗口打開副標題超鏈接，支持'self' | 'blank'，不指定等同為'blank'（新窗口）
x:'center'//水平安放位置，默認為'left'，可選為：'center' | 'left' | 'right' | {number}（x坐標，單位px）
y: 'top',//垂直安放位置，默認為top，可選為：'top' | 'bottom' | 'center' | {number}（y坐標，單位px）
textAlign: null,//水平對齊方式，默認根據x設置自動調整，可選為： left' | 'right' | 'center
backgroundColor: 'rgba(0,0,0,0)',//標題背景顏色，默認'rgba(0,0,0,0)'透明
borderColor: '#ccc',//標題邊框顏色,默認'#ccc'
borderWidth: 0,//標題邊框線寬，單位px，默認為0（無邊框）
padding: 5,//標題內邊距，單位px，默認各方向內邊距為5，接受數組分別設定上右下左邊距
itemGap: 10,//主副標題縱向間隔，單位px，默認為10
textStyle: {//主標題文本樣式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
subtextStyle: {//副標題文本樣式{"color": "#aaa"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
zlevel: 0,//一級層疊控制。默認0,每一個不同的zlevel將產生一個獨立的canvas，相同zlevel的組件或圖標將在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的內存和性能，並不建議設置過多的zlevel，大部分情況可以通過二級層疊控制z實現層疊控制。
z: 6,//二級層疊控制，默認6,同一個canvas（相同zlevel）上z越高約靠頂層。
},
//提示框，鼠標懸浮交互時的信息提示
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
//圖例，每個圖表最多僅有一個圖例
legend: {
orient: 'vertical',
left: 'left',
data: ['第一部分','第二部分','第三部分','第四部分']
},
// 系列列表,每個系列通過 type 決定自己的圖表類型
series : [
{
name: '訪問',
type: 'pie',
radius : '62%',
center: ['50%', '65%'],/
minAngle:'15',
data:[
{name:"第一部分",value:4},
{name:"第二部分",value:7},
{name:"第三部分",value:3},
{name:"第四部分",value:1},
],
itemStyle: {
normal:{
label:{
show:true,
formatter: "{b} :\n {c} \n ({d}%)",
position:"inner"
}
}
}
}
],
};
myChart.setOption(option);// 為echarts對象加載數據
</script>
</body>
</html>