echart.js的使用與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內容

 

 

       以上為常用api,待我再次學習繼續總結~

 

 

 

 

 

 

       

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM