---恢復內容開始---
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,待我再次學習繼續總結~