echarts圖表中x軸和y軸的配置指南
xAxis與yAxis中有很多配置項,下面我以xAxis進行詳解,yAxis參考xAxis即可
nameTextStyle:坐標軸名稱的文字樣式
axisLine:坐標軸軸線相關(guān)設置。
axisTick:坐標軸刻度相關(guān)設置。
axisLabel:坐標軸刻度標簽的相關(guān)設置。
splitLine: 坐標軸在 grid 區(qū)域中的分隔線設置。
splitArea :坐標軸在 grid 區(qū)域中的分隔區(qū)域,默認不顯示。
上述xAxis與yAxis中的配置項,其中也會含有很多屬性,具體使用請參考一下內(nèi)容。
xAxis: { id: '', show: true, //是否顯示x軸 gridIndex: 0, //軸所在grid索引,默認位于第一個grid alignTicks: false, //在多個軸為數(shù)值軸的時候,可以開啟該配置項自動對齊刻度。只對'value'和'log'類型的軸有效 position: 'top', //軸的位置(top/bottom) offset: 0, //軸相對于默認位置的偏移,在相同的position上有多個軸時有用 type: 'category', //坐標軸類型,值category/value,與y軸呼應,若x軸配置category則y軸配置value name: '', //坐標軸名稱 nameLocation: 'end', //坐標軸名稱顯示位置,可選值start/middle[或者center]/end nameTextStyle: {}, //一般樣式也很少直接修改且內(nèi)容過多待更新... ... nameGap: 15, //坐標軸名稱與軸線間距離 nameRotate: 10, //坐標軸名字旋轉(zhuǎn),角度值 inverse: false, //是否是反向坐標軸 boundaryGap: ['20%', '20%'], // 坐標軸兩邊留白策略,也可以使用布爾值,true居中 min: '', //刻度最小值 max: '', //刻度最大值 scale: false, //只在數(shù)值軸中type: 'value'有效, 設置min和max后無效。是否是脫離 0 值比例。設置成true后坐標刻度不會強制包含零刻度。在雙數(shù)值軸的散點圖中較有用 splitNumber: 5, //坐標軸的分割段數(shù)(預估值) minInterval: 0, //自動計算坐標軸最小間隔,例:設置成1,刻度沒有小數(shù) maxInterval: '', //自動計算坐標軸最大間隔 axisLine: { show: true, // 是否顯示坐標軸軸線 symbol: ['none', 'arrow'], // 軸線兩端箭頭,兩個值,none表示沒有箭頭,arrow表示有箭頭 symbolSize: [10, 15], // 軸線兩端箭頭大小,數(shù)值一表示寬度,數(shù)值二表示高度 lineStyle: { color: '#333', // 坐標軸線線的顏色 width: '5', // 坐標軸線線寬 type: 'solid', // 坐標軸線線的類型(solid實線類型;dashed虛線類型;dotted點狀類型) }, }, axisTick: { show: true, // 是否顯示坐標軸刻度 inside: true, // 坐標軸刻度是否朝內(nèi),默認朝外 length: 5, //坐標軸刻度的長度 lineStyle: { color: '#FFF', //刻度線的顏色 width: 10, //坐標軸刻度線寬 type: 'solid', //坐標軸線線的類型(solid實線類型;dashed虛線類型;dotted點狀類型) }, }, axisLabel: { show: true, //是否顯示刻度標簽 interval: '0', //坐標軸刻度標簽的顯示間隔,在類目軸中有效.0顯示所有 inside: true, //刻度標簽是否朝內(nèi),默認朝外 rotate: 90, //刻度標簽旋轉(zhuǎn)的角度,在類目軸的類目標簽顯示不下的時候可以通過旋轉(zhuǎn)防止標簽之間重疊;旋轉(zhuǎn)的角度從-90度到90度 margin: 10, //刻度標簽與軸線之間的距離 // formatter 刻度標簽的內(nèi)容格式器,支持字符串模板和回調(diào)函數(shù)兩種形式 color: '#FFF', // 刻度標簽文字的顏色 fontStyle: 'normal', // 字體的風格(normal無樣式;italic斜體;oblique傾斜字體) fontWeight: 'normal', // 字體的粗細(normal無樣式;bold加粗;bolder加粗再加粗;lighter變細;數(shù)字定義粗細也可以取值范圍100至700) fontSize: '20', //文字字體大小 align: 'left', // 文字水平對齊方式,默認自動(left/center/right) verticalAlign: 'left', // 文字垂直對齊方式,默認自動(top/middle/bottom) lineHeight: '50', // 行高 backgroundColor: 'red', // 文字塊背景色,例:#123234, red, rgba(0,23,11,0.3) }, splitLine: { show: true, // 是否顯示分隔線。默認數(shù)值軸顯示,類目軸不顯示 interval: '0', // 坐標軸刻度標簽的顯示間隔,在類目軸中有效.0顯示所有 color: ['#ccc'], //color分隔線顏色,可設置單個顏色,也可設置顏色數(shù)組,分隔線會按數(shù)組中顏色順序依次循環(huán)設置顏色 width: 3, // 分隔線線寬 type: 'solid', // 坐標軸線線的類型(solid實線類型;dashed虛線類型;dotted點狀類型) }, splitArea: { show: true, // 是否顯示分隔區(qū)域 interval: '0', // 坐標軸刻度標簽的顯示間隔,在類目軸中有效.0顯示所有 areaStyle: { color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], //color分隔區(qū)域顏色。分隔區(qū)會按數(shù)組中顏色順序依次循環(huán)設置顏色。默認是一個深淺的間隔色 opacity: 1, // 圖形透明度。支持從0到1的數(shù)字,為0時不繪制該圖形 }, }, data: { textStyle: { color: '#FFF', // 文字的顏色 fontStyle: 'normal', // 文字字體的風格(normal無樣式;italic斜體;oblique傾斜字體) fontWeight: 'normal', //字體的粗細(normal無樣式;bold加粗;bolder加粗再加粗;lighter變細;數(shù)字定義粗細也可以取值范圍100至700) fontSize: '20', // 文字字體大小 align: 'left', // 文字水平對齊方式,默認自動(left/center/right) verticalAlign: 'left', // 文字垂直對齊方式,默認自動(top/middle/bottom) lineHeight: '50', // 行高 backgroundColor: 'red', // 文字塊背景色,例:#123234, red, rgba(0,23,11,0.3) } } }
總結(jié)
到此這篇關(guān)于echarts圖表中x軸和y軸的配置的文章就介紹到這了,更多相關(guān)echarts圖表x軸y軸配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
淺析jsopn跨域請求原理及cors(跨域資源共享)的完美解決方法
由于同源策略的緣故,ajax不能向不同域的網(wǎng)站發(fā)出請求。接下來通過本文給大家介紹jsopn跨域請求原理及cors(跨域資源共享)的完美解決方法,需要的朋友可以參考下2017-02-02Javascript圖像處理—圖像形態(tài)學(膨脹與腐蝕)
上一篇文章,我們講解了圖像處理中的閾值函數(shù),這一篇文章我們來做膨脹和腐蝕函數(shù)2013-01-01實現(xiàn)抖音兩個旋轉(zhuǎn)小球的loading技巧實例
這篇文章主要為大家介紹了實現(xiàn)抖音兩個旋轉(zhuǎn)小球的loading技巧實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05IE view-source 無法查看看源碼 JavaScript看網(wǎng)頁源碼
查看網(wǎng)頁源代碼的方法其實有好幾種,最常用的我們就是在瀏覽器中直接選擇“查看網(wǎng)頁源代碼”就可以了,但是在有些時候這種方法卻不能見效,以下再介紹幾種簡單的方法供大家參考!2009-07-07純JavaScript實現(xiàn)櫻花飄落效果的示例代碼
這篇文章主要為大家詳細介紹了如何純JavaScript實現(xiàn)櫻花飄落效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04js使用split函數(shù)按照多個字符對字符串進行分割的方法
這篇文章主要介紹了js使用split函數(shù)按照多個字符對字符串進行分割的方法,實例分析了split函數(shù)的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03