<!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 : {
text: '主標題',
subtext: '副標題',
x:'center',
},
//提示框，鼠標懸浮交互時的信息提示
tooltip : {
show: true,//默認值true，可選為：true（顯示） | false（隱藏）
zlevel: 1,//默認值1，一級層疊控制。每一個不同的zlevel將產生一個獨立的canvas，相同zlevel的組件或圖標將在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的內存和性能，並不建議設置過多的zlevel，大部分情況可以通過二級層疊控制z實現層疊控制。
z: 8,//默認值8，二級層疊控制，同一個canvas（相同zlevel）上z越高約靠頂層。
showContent: true,//默認值true，tooltip主體內容顯示策略，只需tooltip觸發事件或顯示axisPointer而不需要顯示內容時可配置該項為false，
trigger: 'item',//默認值'item'，觸發類型，默認數據觸發，見下圖，可選為：'item' | 'axis'
position: null,//默認值null，位置指定，傳入{Array}，如[x, y]， 固定位置[x, y]；傳入{Function}，如function([x, y]) {return [newX,newY]}，默認顯示坐標為輸入參數，用戶指定的新坐標為輸出返回。
formatter: '{a} < br/>{b} : {c}',//默認值null，內容格式器
//折線（區域）圖、柱狀（條形）圖、K線圖 : a（系列名稱），b（類目值），c（數值）, d（無）
//散點圖（氣泡）圖 : a（系列名稱），b（數據名稱），c（數值數組）, d（無）
//地圖 : a（系列名稱），b（區域名稱），c（合並數值）, d（無）
//餅圖、雷達圖、儀表盤、漏斗圖: a（系列名稱），b（數據項名稱），c（數值）, d（餅圖：百分比 | 雷達圖：指標名稱）
islandFormatter: '{a} < br/>{b} : {c}',//默認值'{a} < br/>{b} : {c}'，拖拽重計算獨有，數據孤島內容格式器
showDelay: 20,//默認值20，顯示延遲，添加顯示延遲可以避免頻繁切換，特別是在詳情內容需要異步獲取的場景，單位ms
hideDelay: 100,//默認值100，隱藏延遲，單位ms
transitionDuration: 0.4,//默認值0.4，動畫變換時長，單位s，如果你希望tooltip的跟隨實時響應，showDelay設置為0是關鍵，同時transitionDuration設0也會有交互體驗上的差別。
enterable: false,//默認值false，鼠標是否可進入詳情氣泡中，默認為false，如需詳情內交互，如添加鏈接，按鈕，可設置為true。
backgroundColor: 'rgba(0,0,0,0.7)',//默認值，提示背景顏色，默認為透明度為0.7的黑色
borderColor: '#333',//默認值，提示邊框顏色
borderRadius: 4,//默認值，提示邊框圓角，單位px，默認為4
borderWidth: 0,//默認值，提示邊框線寬，單位px，默認為0（無邊框）
padding: 5,//默認值，提示內邊距，單位px，默認各方向內邊距為5，接受數組分別設定上右下左邊距，同css
axisPointer: {//默認值，坐標軸指示器，默認type為line，可選為：'line' | 'cross' | 'shadow' | 'none'(無)，指定type后對應style生效，見下
//lineStyle設置直線指示器（詳見lineStyle）,
//crossStyle設置十字准星指示器（詳見lineStyle）,
//shadowStyle設置陰影指示器（詳見shadowStyle），areaStyle.size默認為'auto'自動計算，可指定具體寬度
type: 'none',//默認值，可選值：'line' | 'cross' | 'shadow' | 'none'(無)，指定type后對應style生效（如下）
lineStyle: {//默認值各異，
color: 'rgba(0,0,0,0.7)',//默認值各異，顏色rgba
type: 'solid',//默認值，
width: 0,//默認值，
shadowColor: 'rgba(0,0,0,0)',//默認值，折線主線(IE8+)有效，陰影色彩，支持rgba
shadowBlur: 5,//默認值，折線主線(IE8+)有效，陰影模糊度，大於0有效
shadowOffsetX: 3,//默認值，折線主線(IE8+)有效，陰影橫向偏移，正值往右，負值往左
shadowOffsetY: 3,//默認值，折線主線(IE8+)有效，陰影縱向偏移，正值往下，負值往上
},
crossStyle: {//默認值，
color: 'rgba(0,0,0,0.7)',//默認值，
type: 'solid',//默認值，
width: 0,//默認值，
shadowColor: 'rgba(0,0,0,0)',//默認值，
shadowBlur: 5,//默認值，
shadowOffsetX: 3,//默認值，
shadowOffsetY: 3,//默認值，
},
shadowStyle: {//默認值，
color: 'rgba(0,0,0,0.7)',//默認值，
type: 'default',//默認值，
},
textStyle: {//默認值，
fontFamily: 'Arial, Verdana, sans...',//默認值，
fontSize: 12,//默認值，
fontStyle: 'normal',//默認值，
fontWeight: 'normal',//默認值，
},
},
textStyle: {//默認值，
color: 'rgba(0,0,0,0.7)',//默認值各異，
decoration: 'none',//默認值，
align: 'rgba(0,0,0,0.7)',//默認值，
baseline: 'rgba(0,0,0,0.7)',//默認值，
fontFamily: 'Arial, Verdana, sans...',//默認值，
fontSize: 12,//默認值，
fontStyle: 'normal',//默認值，樣式，可選為：'normal' | 'italic' | 'oblique'
fontWeight: 'normal',//默認值，粗細，可選為：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
},
},
//圖例，每個圖表最多僅有一個圖例
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>
