<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>echarts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts執行個體
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和資料
var option = {
//一.公用選項:
//1.全圖背景顏色:"#00fa9a"|"rgba(255,0,100,1)".r:紅色值,正整數|百分數 g:綠色值,正整數|百分數 b:藍色值,正整數|百分數 a:透明度,0~1之間數字
//預設為:"rgba(0,0,0,0)"
"backgroundColor":"rgba(0,0,255,0.5)",
//2.數值系列顏色列表:["#00fa9a","rgba(255,0,100,1)",..].當系列數量個數比顏色列表長度大時將迴圈選取
//預設為:['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed','#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0','#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700','#6b8e23','#ff00ff','#3cb371','#b8860b','#30e0e0']
"color":["rgba(255,0,0,1)","rgba(0,255,0,1)","rgba(0,0,255,1)"],
//3.是否渲染為圖片:true|false|"png"|"jpeg"(不懂..)
//預設為:false
"renderAsImage":false,
//4.是否啟用拖拽重計算特性:true|false.相關的還有calculableColor,calculableHolderColor,nameConnector,valueConnector(不懂..)
//預設為:false
"calculable":false,
//5.是否啟用圖表初始化動畫:true|false.相關的還有addDataAnimation,animationThreshold,animationDuration,animationDurationUpdate,animationEasing
//預設為:true
"animation":true,
//二.組件選項:
//1.時間軸,每個圖表最多僅有一個時間軸
"timeline":{
//1.1是否顯示:true|false
//預設為:true
"show":true,
//1.2一級層疊控制:整數.每一個不同的zlevel將產生一個獨立的canvas,相同zlevel的組件或表徵圖將在同一個canvas上渲染.zlevel越高越靠頂層,canvas對象增多會消耗更多的記憶體和效能,並不建議設定過多的zlevel,大部分情況可以通過二級層疊控制z實現層疊控制
//預設為:0
"zlevel":0,
//1.3二級層疊控制:整數.同一個canvas(相同zlevel)上z越高越靠頂層
//預設為:4
"z":4,
//1.4模式:"time"|"number".時間軸間隔根據時間跨度自動計算
//預設為:"time"
"type":"time",
//1.4時間軸上多個option切換時是否進行merge操作:true|false.同setOption第二個參數
//預設為:false
"notMerge":false,
//1.5拖拽或點擊改變時間軸是否即時顯示:true|false.在不支援Canvas的瀏覽器中該值自動強制置為false
//預設為:true
"realtime":true,
//1.6時間軸左上方橫座標:整數|百分比字串.數值單位px,支持度百分比(字串),如"50%"(顯示地區橫向中心)
//預設為:80
"x":80,
//1.7時間軸左上方縱座標:整數|百分比字串.數值單位px,支持度百分比(字串),隨y2定位,如"50%"(顯示地區縱向中心)
//預設為:null
"y":0,
//1.8時間軸右下角橫座標:整數|百分比字串.數值單位px,支持度百分比(字串),如"50%"(顯示地區橫向中心)
//預設為:80
"x2":80,
//1.9時間軸左上方縱座標:整數|百分比字串.數值單位px,支持度百分比(字串),如"50%"(顯示地區縱向中心)
//預設為:0
"y2":0,
//1.10時間軸寬度:整數|百分比字串.數值單位px,指定width後將忽略x2.支持度百分比(字串),如"50%"(顯示地區一半的寬度)
//預設為:總寬度-x-x2
"width":50,
//1.11時間軸高度:整數|百分比字串.數值單位px,支持度百分比(字串),如"50%"(顯示地區一半的高度)
//預設為:50
"height":50,
//1.12背景顏色:"#00fa9a"|"rgba(255,0,100,1)"
//預設為:"rgba(0,0,0,0)"
"color":"rgba(0,0,0,0)",
//1.13邊框線寬:整數
//預設為:0
"borderWidth":0,
//1.14邊框顏色:"#00fa9a"|"rgba(255,0,100,1)"
//預設為:"#CCC"
"borderColor":"#CCC",
//1.15內邊距:整數|[整數].單位px,預設各方向內邊距為5,接受數組分別設定上右下左邊距,同css
//預設為:5
"padding":5,
//1.16播放控制器位置:"left"|"right"|"none"
//預設為:"left"
"controlPosition":"left",
//1.17是否自動播放:true|false
//預設為:false
"autoPlay":false,
//1.18是否迴圈播放:true|false
//預設為:true
"loop":true,
//1.19播放時間間隔:整數.單位ms
//預設為:2000
"playInterval":2000,
//1.20時間軸軸線樣式
//預設屬性如下,其他屬性詳見文檔
"lineStyle":{
"color":'#666',
"width":1,
"type":'dashed'
},
//1.21時間軸標籤文本
//預設屬性如下
"label":{
//1.21.1是否顯示
//預設為true
"show":true,
//1.21.2挑選間隔:"auto"(自動隱藏顯示不下的)|0(全部顯示)|[整數]
//預設為:"auto"
"interval":"auto",
//1.21.3旋轉角度:-90~90.正值為逆時針,負值為順時針
//預設為:0,不旋轉
"rotate":0,
//1.21.4間隔名稱格式器:{string}(Template)|{Function}
//預設為null
"formatter":null,
//1.21.5文字樣式
//預設屬性如下,其他屬性詳見文檔
"textStyle":{
"color":"#333"
}
},
//1.22時間軸當前點
//預設屬性如下,其他屬性詳見文檔
"checkpointStyle":{
//1.22.1當前點symbol
//預設為"auto".隨軸上的symbol
"symbol":"auto",
//1.22.2當前點symbol大小
//預設為"auto".隨軸上symbol大小
"symbolSize":"auto",
//1.22.3當前點symbol顏色
//預設為"auto".隨當前點顏色,可指定具體顏色,如無則為"#1e90ff"
"color":"auto",
//1.22.4當前點symbol邊線顏色
//預設為"auto"
"borderColor":"auto",
//1.22.5當前點symbol邊線寬度
//預設為"auto"
"borderWidth":"auto",
//1.22.6時間軸當前點標籤文本
//預設屬性如下,其他屬性同上
"label":{
"show":false,
"textStyle":{
"color":"auto"
}
}
},
//1.23時間軸控制器樣式
//預設屬性如下
"controlStyle":{
//1.23.1按鈕大小:數字
//預設為:15
"itemSize":15,
//1.23.2按鈕間隔:數字
//預設為:5
"itemGap":5,
//1.23.3正常
//預設屬性如下
"normal":{
"color":"#333"
},
//1.23.4高亮
//預設屬性如下
"emphasis":{
"color":"#1e90ff"
}
},
//1.24軸點symbol:字串.同serie.symbol
//預設為:"emptyDiamond"
"symbol":"emptyDiamond",
//1.25軸點symbol:整數同serie.symbolSize
//預設為:4
"symbolSize":4,
//1.26當前索引位置:數字.對應options數組,用於指定顯示特定系列
//預設為:0
"currentIndex":0,
//1.27時間軸列表:[字串]同時也是軸label內容
//預設為:[]
"data":['2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01',
{ name:'2013-06-01', symbol:'emptyStar6', symbolSize:8 },
'2013-07-01', '2013-08-01', '2013-09-01', '2013-10-01', '2013-11-01',
{ name:'2013-12-01', symbol:'star6', symbolSize:8 }]
},
"toolbox":{
"show":true,
"feature":{
"mark":{
"show":true,
"title":{
"markUndo":"刪除輔助線",
"markClear":"清空輔助線",
"mark":"輔助線開關"
},
"lineStyle":{
"color":"#1e90ff",
"type":"dashed",
"width":2
}
},
"dataView":{
"show":true,
"title":"資料檢視",
"readOnly":false,
"lang":[
"資料檢視",
"關閉",
"重新整理"
]
},
"magicType":{
"show":true,
"title":{
"bar":"直條圖切換",
"stack":"堆積",
"tiled":"平鋪",
"line":"折線圖切換"
},
"type":[
"line",
"bar"
]
},
"restore":{
"show":true,
"title":"還原"
},
"saveAsImage":{
"show":true,
"title":"儲存為圖片",
"type":"png",
"lang":[
"點擊儲存"
]
}
}
},
"tooltip":{
"trigger":"axis",
"formatter":"Temperature : <br/>{b}km : {c}°C"
},
"legend":{
"data":[
"高度(km)與氣溫(°C)變化關係"
]
},
"xAxis":[
{
"type":"value",
"axisLabel":{
"formatter":"{value} °C"
}
}
],
"yAxis":[
{
"data":[
0,10,20,30,40,50,60,70,80
],
"type":"category",
"axisLine":{
"onZero":false
},
"axisLabel":{
"formatter":"{value} km"
},
"boundaryGap":false
}
],
"series":[
{
"data":[
15,-50,-56.5,-46.5,-22.1,-2.5,-27.7,-55.7,-76.5
],
"name":"高度(km)與氣溫(°C)變化關係",
"type":"line",
"itemStyle":{
"normal":{
"lineStyle":{
"shadowColor":"rgba(0,0,0,0.4)"
}
}
},
"smooth":true
}
]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
