---恢復內容開始---
echart.js的使用與API
1.echart.js的使用：
第一步：在head標簽或body下創建一個script標簽去引用echart.js,(該文件可以在echart的官方首頁下載最新最全面的js文件，官網：http://echart.baidu.com)；
<script src="./js/echarts.js"></script>
第二步：並在body中創建一個具備大小的dom（div）；
<div id="main" style="width:600px height:400px;"></div>
第三布：基於創建好的DOM，創建script，並初始化echart圖表；
var mychart = echart.init(document.getElementById('main'));
第四步：在script標簽中創建選項並布置參數；
var option={//自定義參數，見下文參數};
第五步：布置完參數后，在最后為echart對象加載數據
mychart.setOption(option);
2.API
1.tooltip:提示框，鼠標懸浮交互時的信息提示
參數：1.show:顯示策略，默認為true（顯示），可選false（隱藏）；
2.trigger：觸發類型，默認為item（觸發），可選axis（自定義觸發）；
3.zlevel:一級層疊控制，默認值為1，渲染canvas，相同的會在同一個canvas上渲染，但不推薦過多的設置，
canvas對象增多會消耗更多的內存和性能，所以大部分可通過二級層疊來控制
4.z：二級層疊控制，默認值8，相同的zlevel上z越高越靠頂層。
5.showContent:默認為true，在show或axisPointer觸發但不顯示內容的時候，可以配置為false（隱藏）
6.position：位置指定，默認顯示坐標為輸出參數，用戶指定的新坐標為輸出返回
如：function([x,y]){return [newX,newY]}
7.formatter:內容格式器，默認值為null，，支持異步回調
8.islandFormatter：拖拽重計算獨有，數據孤島內容格式器
9.showDelay：顯示延遲，默認值為20,單位ms,添加顯示延遲可以避免頻繁切換。
10.hideDelay:隱藏延遲，默認值為100,單位是ms
11.transitionDuration:動畫變換時長，默認值為0.4,單位是s，改變交互體驗
12.enterable:false 鼠標是否可進入詳情氣泡中，默認為false，如增加詳情交互，如添加鏈接等，可設置true
13.backgroundColor：提示背景顏色，默認‘rgba(0,0,0,0.7)’,默認透明度為0.7的黑色
14.borderColor:提示邊框顏色，默認為#333；
15.borderRadius：提示邊框圓角，默認為4,單位為px
16.borderWidth:提示邊框線寬，默認為0，單位為px
17.padding:提示內邊距，默認各方向為5，接受數組分別設定各邊距同css
18.textStyle：文本樣式，默認為白色，{color:'#fff'}
19.axisPointer:坐標軸指示器，默認type：line,可選‘line\cross\shadow\none’ 對應設定style生效
如：type:'line',lineStyle:{},crossStyle:{},shadowStyle:{}
2.legend:圖例
1.data：圖例內容數組，每一項代表一個系列的name，根據該值索引series中同名系列所用的圖標類型和item
和itemStyle,如果索引不到，該item將默認為沒啟動狀態，參數name,textStyle,icon
2.orient:布局方式，默認為horizontal水平布局，可選vertical豎直。
3.x：安放位置，默認全圖居中，可選：left,right
4.y：安放位置，默認全圖頂端，可選top,bottom,center
5.itemGap:各個item的間距，默認為10，單位px，配合orient布局
6.itemWidth：圖例圖形的寬度，默認為20px.
7.itemHeight:圖例圖形的高度，默認為14px
8.textStyle：默認值設定圖例文字顏色，color:auto,默認為{color:'#333'}
9.selectedMode:選擇模式，默認開啟圖例開關，true，可選single,multiple,true,
10.selected:配置默認選中狀態，可配合legend,selected事件做動態數據載入
11.formatter：文本格式器，默認為null
12.show:顯示策略，默認為true（顯示），可選false（隱藏）
13.zlevel:一級層疊控制，默認值為1，渲染canvas，相同的會在同一個canvas上渲染，但不推薦過多的置，
canvas對象增多會消耗更多的內存和性能，所以大部分可通過二級層疊來控制
14.z：二級層疊控制，默認值8，相同的zlevel上z越高越靠頂層。
15.borderRadius：提示邊框圓角，默認為4,單位為px
16.borderWidth:提示邊框線寬，默認為0，單位為px
17.padding:提示內邊距，默認各方向為5，接受數組分別設定各邊距同css
18.borderColor:提示邊框顏色，默認為#333；
3.series：驅動圖表生成的數據內容數組，數組中每一項為一個系列的選項及數據，確定適用類型：
1.name：系列名稱，如啟用ledgend，改制將被legend.data索引相關
2.type：圖表類型，必要參數！為空或不支持類型，則該系列數據不被顯示，可選為：
'line(折線圖)','bar(柱狀圖)','scatter(散點圖)','k(K線圖)','pie(餅圖)','radar(雷達圖)','chord(和弦圖)'
'force(力導向布局圖)','map(地圖)'
3.data：數據，默認值[]
4.zlevel：一級層疊控制。
5.z：二級層疊控制
6.clickable：數據圖形是否可點擊，默認開啟，true，如果沒有click事件響應可以關閉
7.markPoint:標注
8.markLine:標線
不同type有個別屬性不同或增加
4.title：標題，每隔圖標最多僅有一個標題控件，每隔標題控件可設主副標題
1.show:顯示策略，默認為true（顯示），可選false（隱藏）；
2.text：主標題文本，默認值‘’,‘\n’指定換行；
3.zlevel:一級層疊控制，默認值為1，渲染canvas，相同的會在同一個canvas上渲染，但不推薦過多的設置，
canvas對象增多會消耗更多的內存和性能，所以大部分可通過二級層疊來控制
4.z：二級層疊控制，默認值8，相同的zlevel上z越高越靠頂層。
5.link：主標題文本超鏈接
6.target：指定窗口打開主標題超鏈接,默認null，支持self,blank,不指定等同為blank(新窗口)
7.subtext:副標題文本，‘\n’指定換行、
8.sublink：副標題文本超鏈接
9.subtarget:指定窗口打開副標題超鏈接，默認null，支持self,blank,不指定等同為blank(新窗口)
10.textAlign:水平對齊方式，默認根據x設置自動調整，left,right,center
11.backgroundColor:標題背景顏色，默認透明
12.borderColor:標題邊框顏色，默認為#ccc
13.borderWidth：標題邊框線寬，默認為0，單位px
14.padding:提示內邊距，默認各方向為5，接受數組分別設定各邊距同css
15.itemGap：主副標題縱向間隔，默認為10，單位px
16.textStyle:主標題文本樣式，接受數組分別設定各邊距同css
17.subtextStyle:副標題文本樣式
18.x：水平安放位置，默認為left,可選left,center,right
19.y：垂直安放位置，默認為top,可選top,bottom,center
5.xAxis,yAxis:直角坐標系中橫縱軸
坐標軸類型，橫軸默認為類目型‘category’.縱軸默認為數值型'value'如：
xAxis:[{type:'category',data:['襯衫','羊毛衫','雪紡衫','褲子']},],
yAxis:[{type:'value'}]
6.axis:坐標軸有三種類型：
- 類目型：需要指定類目列表，坐標軸內有且僅有這些指定類目坐標
- 數值型：需要指定數值區間，不指定時則自定計算數值范圍，坐標軸內包含數值區間內容全部坐標
- 時間型：時間型坐標軸用法同數值型，只是目標處理和格式化顯示時會自動轉變為時間，並且隨着時間跨度的不同自動切換需要顯示的時間粒度
1.type：必填，縱坐標軸為value，橫坐標軸為category
2.show:顯示策略，默認為true(顯示)，可選false(隱藏)
3.zlevel：一級層疊控制。
4.z:二級層疊控制
5.position：坐標軸類型，橫坐標默認為bottom，縱坐標默認為left， 可選值bottom,top,left,right
6.name:坐標軸名稱，默認為空
7.nameLocation:坐標抽名稱位置，默認為end，可選start
8.nameTextStyle:坐標軸名稱文字樣式，默認取全局配置，顏色跟隨axisLine主色，false則頂頭
9.boundaryGap:類目其實和結束兩段空白策略，默認true空，false則頂頭
10.boundaryGap：坐標軸兩段空白策略，默認值[0,0],可選[原始最小值和最終的差距，原始最大值和最終的差距]
11.min：指定的最小值，默認為null，會自動根據數值調整，指定后忽略boundaryGap[0]
12.max: 指定的最大值，默認為null，會自動根據數值調整，指定后忽略boundaryGap[1]
13.scale: 脫離0值比例，放大聚焦到最終_min,_max區間，
14.splitNumber:分割段數，不指定時根據min、max算法調整
15.logLabelBase:axis.type===‘log’時生效。指定時axisLabel顯示指數形式如4²，不指定是為普通形式如：1000，
16.logPositive:axis.type===‘log’時生效,指定是否使用反向log數軸，默認自適應，即如果value全為負值則為false否則為true
17.axisLine:坐標軸線，默認不顯示
18.axisTick：坐標軸小標記，默認不顯示
19.axisLabel：坐標軸文本標簽。
20.splitLine：分割線，默認顯示
21.splitArea:分割區域，默認不顯示
22.data：類目列表
7.timeline:時間軸，每隔圖標最多僅有一個時間軸控件
1.type：模式是時間類型，默認為time，可選為‘number’
2.notMerge：時間軸上多個option切換時，是否進行merge操作，同setOption第二個參數
3.realtime:拖拽或點擊改變時間軸是否實時顯示, 默認為true，在不支持canvas的瀏覽器中強制false
4.autoPlay:是否自動播放，默認為false
5.loop：是否循環播放,默認為true
6.playInterval:播放時間間隔，默認2000，單位ms
7.controlPosition:播放器位置，默認為left，可選left、right、none
8.x,y,x2,y2:時間軸橫縱坐標的的左上角，時間軸橫縱坐標的右上角
9.width:時間軸的寬度，默認自適應
10.height：時間軸的高度，默認50，單位%;
11.lineStyle:時間軸軸線樣式，lineStyle控制線條樣式
12.label:抱歉文本
13.checkpointStyle：時間軸當前點
14.controlStyle：時間軸控制器樣式
15.symbol:軸點symbol，同serie,symbol
16.symbolSize:軸點symbol，同serie,symbolSize
17.currentIndex:當前索引位置，對應option數組，用於指定特定系列
18.data：時間軸列表，同時也是軸label內容
以上為常用api，待我再次學習繼續總結~