---恢複内容開始---
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，待我再次學習繼續總結~
---恢複内容開始---
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内容