1. x軸和y軸都由軸線、刻度、刻度標簽、軸標題四個部分組成。部分圖表中還會有網格線來幫助查看和計算數據。

2. 普通的二維數據坐標系都有x軸和y軸, 通常情況下, x軸顯示在圖表的底部, y軸顯示在左側, 一般配置如下:

option = {xAxis: {// ...},yAxis: {// ...} };

3. x軸常用來標示數據的維度, 維度一般用來指數據的類別, 是觀察數據的角度, 例如"銷售時間"、"銷售地點"、"產品名稱"等。y軸常常用來標示數據的數值, 數值是用來具體考察某一類數據的數量值, 也是我們需要分析的指標, 例如"銷售數量"和"銷售金額"等。

option = {xAxis: {type: 'time',name: '銷售時間'// ...},yAxis: {type: 'value',name: '銷售數量'// ...}// ... };

4. 當x軸(水平坐標軸)跨度很大, 可以采用區域縮放方式靈活顯示數據內容。

option = {xAxis: {type: 'time',name: '銷售時間'// ...},yAxis: {type: 'value',name: '銷售數量'// ...},dataZoom: [// ...]// ... };

5. 在二維數據中, 軸也可以有多個。ECharts中一般情況下單個grid組件最多只能放兩個x/y軸。兩個x軸顯示在上下, 兩個y軸顯示在左右兩側。

option = {xAxis: {type: 'time',name: '銷售時間'// ...},yAxis: [{type: 'value',name: '銷售數量'// ...},{type: 'value',name: '銷售金額'// ...}]// ... };

6. 坐標軸軸線相關設置

6.1. ECharts提供了軸線axisLine相關的配置, 我們可以根據實際情況調整, 例如軸線兩端的箭頭, 軸線的樣式等。

6.2. xAxis/yAxis.axisLine.show = true, 是否顯示坐標軸軸線。boolean類型。

6.3. xAxis/yAxis.axisLine.onZero = true, X軸或者Y軸的軸線是否在另一個軸的0刻度上, 只有在另一個軸為數值軸且包含0刻度時有效。boolean類型。

6.4. xAxis/yAxis.axisLine.onZeroAxisIndex, 當有雙軸時, 可以用這個屬性手動指定, 在哪個軸的0刻度上。number類型。

6.5. xAxis/yAxis.axisLine.symbol = 'none', 軸線兩邊的箭頭?？梢允亲址? 表示兩端使用同樣的箭頭或者長度為2的字符串數組, 分別表示兩端的箭頭。默認不顯示箭頭, 即'none'。兩端都顯示箭頭可以設置為'arrow', 只在末端顯示箭頭可以設置為['none', 'arrow']。string和Array類型。

6.6. xAxis/yAxis.axisLine.symbolSize = [10, 15], 軸線兩邊的箭頭的大小, 第一個數字表示寬度(垂直坐標軸方向), 第二個數字表示高度(平行坐標軸方向)。Array類型。

6.7. xAxis/yAxis.axisLine.symbolOffset = [0, 0], 軸線兩邊的箭頭的偏移, 如果是數組, 第一個數字表示起始箭頭的偏移, 第二個數字表示末端箭頭的偏移; 如果是數字, 表示這兩個箭頭使用同樣的偏移。Array和number類型。

6.8. xAxis/yAxis.axisLine.lineStyle, 所有屬性:

{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }。Object類型。

option = {xAxis: {axisLine: {symbol: 'arrow',lineStyle: {type: 'dashed'// ...}}// ...},yAxis: {axisLine: {symbol: 'arrow',lineStyle: {type: 'dashed'// ...}}}// ... };

7. 坐標軸刻度相關設置

7.1. ECharts提供了軸線axisTick 相關的配置, 我們可以根據實際情況調整, 例如刻度線的長度, 樣式等。

7.2. xAxis/yAxis.axisTick.show = true, 是否顯示坐標軸刻度。boolean類型。

7.3. xAxis/yAxis.axisTick.alignWithLabel, boolean類型。類目軸中在boundaryGap為true的時候有效, 可以保證刻度線和標簽對齊。如下圖:

7.4. xAxis/yAxis.axisTick.interval = 'auto', 坐標軸刻度的顯示間隔, 在類目軸中有效。默認同axisLabel.interval一樣。默認會采用標簽不重疊的策略間隔顯示標簽。可以設置成0強制顯示所有標簽。如果設置為1, 表示隔一個標簽顯示一個標簽, 如果值為2, 表示隔兩個標簽顯示一個標簽, 以此類推。也可以通過回調函數控制, 回調函數第一個參數是類目的index, 第二個值是類目名稱, 如果跳過則返回false。number和Function類型。

7.5. xAxis/yAxis.axisTick.inside, 坐標軸刻度是否朝內, 默認朝外。boolean類型。

7.6. xAxis/yAxis.axisTick.length = 5, 坐標軸刻度的長度。number類型。

7.7. xAxis/yAxis.axisTick.lineStyle, 刻度線的樣式設置。所有屬性:

{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }。Object類型。

option = {xAxis: {axisTick: {length: 6,lineStyle: {type: 'dashed'// ...}}// ...},yAxis: {axisTick: {length: 6,lineStyle: {type: 'dashed'// ...}}}// ... };

8. 刻度標簽

8.1. ECharts提供了軸線axisLabel相關的配置, 我們可以根據實際情況調整, 例如文字對齊方式, 自定義刻度標簽內容等。

8.2. xAxis/yAxis.axisLabel.show = true, 是否顯示刻度標簽。boolean類型。

8.3. xAxis/yAxis.axisLabel.inside, 刻度標簽是否朝內, 默認朝外。boolean類型。

8.4. xAxis/yAxis.axisLabel.rotate, 刻度標簽旋轉的角度, 在類目軸的類目標簽顯示不下的時候可以通過旋轉防止標簽之間重疊。旋轉的角度從-90度到90度。number類型。

8.5. xAxis/yAxis.axisLabel.margin = 8, 刻度標簽與軸線之間的距離。number類型。

8.6. xAxis/yAxis.axisLabel.showMinLabel是否顯示最小tick的label?？扇≈祎rue, false, null。默認自動判定(即如果標簽重疊, 不會顯示最小tick的label)。boolean類型。

8.7. xAxis/yAxis.axisLabel.showMaxLabel是否顯示最大tick的label。可取值true, false, null。默認自動判定(即如果標簽重疊, 不會顯示最大tick的label)。boolean類型。

8.8. xAxis/yAxis.axisLabel.hideOverlap是否隱藏重疊的標簽。boolean類型。

8.9. xAxis/yAxis.axisLabel.color刻度標簽文字的顏色, 默認取axisLine.lineStyle.color。Color和Function類型。支持回調函數, 參數是標簽的文本, 返回顏色值, 格式如下:

(val: string) => Color

8.10. xAxis/yAxis.axisLabel.fontStyle = 'normal', 文字字體的風格?？蛇x: 'normal'、'italic'和'oblique'。string類型。

8.11. xAxis/yAxis.axisLabel.fontWeight = 'normal', 文字字體的粗細?？蛇x: 'normal'、'bold'、'bolder'、'lighter'和100 | 200 | 300 | 400...。string和number類型。

8.12. xAxis/yAxis.axisLabel.fontFamily = 'sans-serif', 文字的字體系列。還可以是'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...。string類型。

8.13. xAxis/yAxis.axisLabel.fontSize = 12, 文字的字體大小。number類型。

8.14. xAxis/yAxis.axisLabel.align, 文字水平對齊方式, 默認自動。可選: 'left'、'center'和'right'。string類型。

8.15. xAxis/yAxis.axisLabel.verticalAlign, 文字垂直對齊方式, 默認自動?？蛇x: 'top'、'middle'和'bottom'。string類型。

8.16. xAxis/yAxis.axisLabel.lineHeight, 行高。number類型。

8.17. xAxis/yAxis.axisLabel.backgroundColor = 'transparent', 文字塊背景色。string和Object類型?？梢允褂妙伾? 例如: '#123234', 'red', 'rgba(0,23,11,0.3)'。也可以直接使用圖片, 當使用圖片的時候, 可以使用width或height指定高寬, 也可以不指定自適應。例如:

backgroundColor: {image: 'xxx/xxx.png'// 這里可以是圖片的 URL，// 或者圖片的 dataURI，// 或者 HTMLImageElement 對象，// 或者 HTMLCanvasElement 對象。 }

8.18. xAxis/yAxis.axisLabel.borderColor, 文字塊邊框顏色。Color類型。

8.19. xAxis/yAxis.axisLabel.borderWidth, 文字塊邊框寬度。number類型。

8.20. xAxis/yAxis.axisLabel.borderType = 'solid', 文字塊邊框描邊類型?？蛇x: 'solid'、'dashed'和'dotted'。string、number和Array類型。自v5.0.0開始, 也可以是number或者number數組, 用以指定線條的dash array, 配合borderDashOffset可實現更靈活的虛線效果。例如:

{borderType: [5, 10],borderDashOffset: 5 }

8.21. xAxis/yAxis.axisLabel.borderDashOffset, 用于設置虛線的偏移量, 可搭配borderType指定dash array實現靈活的虛線效果。number類型。

8.22. xAxis/yAxis.axisLabel.borderRadius, 文字塊的圓角。number和Array類型。

8.23. xAxis/yAxis.axisLabel.padding, 文字塊的內邊距。number和Array類型。例如:

• padding: [3, 4, 5, 6], 表示[上, 右, 下, 左]的邊距。
• padding: 4, 表示padding: [4, 4, 4, 4]。
• padding: [3, 4], 表示padding: [3, 4, 3, 4]。

8.24. xAxis/yAxis.axisLabel.shadowColor = 'transparent', 文字塊的背景陰影顏色。Color類型。

8.25. xAxis/yAxis.axisLabel.shadowBlur, 文字塊的背景陰影長度。number類型。

8.26. xAxis/yAxis.axisLabel.shadowOffsetX, 文字塊的背景陰影X偏移。number類型。

8.27. xAxis/yAxis.axisLabel.shadowOffsetY, 文字塊的背景陰影Y偏移。number類型。

8.28. xAxis/yAxis.axisLabel.width, 文本顯示寬度。number類型。

8.29. xAxis/yAxis.axisLabel.height, 文本顯示高度。number類型。

8.30. xAxis/yAxis.axisLabel.textBorderColor, 文字本身的描邊顏色。Color類型。

8.31. xAxis/yAxis.axisLabel.textBorderWidth, 文字本身的描邊寬度。number類型。

8.32. xAxis/yAxis.axisLabel.textBorderType = 'solid', 文字本身的描邊類型?？蛇x: 'solid'、'dashed'和'dotted'。string、number和Array類型。自v5.0.0開始, 也可以是number或者number數組, 用以指定線條的dash array, 配合textBorderDashOffset可實現更靈活的虛線效果。例如:

{textBorderType: [5, 10],textBorderDashOffset: 5 }

8.33. xAxis/yAxis.axisLabel.textBorderDashOffset, 用于設置虛線的偏移量, 可搭配textBorderType指定dash array實現靈活的虛線效果。number類型。

8.34. xAxis/yAxis.axisLabel.textShadowColor = 'transparent', 文字本身的陰影顏色。Color類型。

8.35. xAxis/yAxis.axisLabel.textShadowBlur, 文字本身的陰影長度。number類型。

8.36. xAxis/yAxis.axisLabel.textShadowOffsetX, 文字本身的陰影X偏移。number類型。

8.37. xAxis/yAxis.axisLabel.textShadowOffsetY, 文字本身的陰影Y偏移。number類型。

8.38. xAxis/yAxis.axisLabel.overflow = 'none', 文字超出寬度是否截斷或者換行。string類型。配置width時有效。

• 'truncate'截斷, 并在末尾顯示ellipsis配置的文本, 默認為...
• 'break'換行
• 'breakAll'換行, 跟'break'不同的是, 在英語等拉丁文中, 'breakAll'還會強制單詞內換行

8.39. xAxis/yAxis.axisLabel.ellipsis = '...', 在overflow配置為'truncate'的時候, 可以通過該屬性配置末尾顯示的文本。string類型。

8.40. xAxis/yAxis.axisLabel.interval = 'auto', 坐標軸刻度標簽的顯示間隔, 在類目軸中有效。默認會采用標簽不重疊的策略間隔顯示標簽。可以設置成0強制顯示所有標簽。如果設置為1, 表示隔一個標簽顯示一個標簽, 如果值為2, 表示隔兩個標簽顯示一個標簽, 以此類推。也可以通過回調函數控制, 第一個參數是類目的index, 第二個值是類目名稱, 如果跳過則返回false, 回調函數格式如下:

(index:number, value: string) => boolean

8.41. xAxis/yAxis.axisLabel.formatter, 刻度標簽的內容格式器, 支持字符串模板和回調函數兩種形式。示例:

// 使用字符串模板, 模板變量為刻度默認標簽 {value} formatter: '{value} kg' // 使用函數模板, 函數參數分別為刻度數值(類目), 刻度的索引 formatter: function (value, index) {return value + 'kg'; }

8.42. xAxis/yAxis.axisLabel.rich, 在rich里面, 可以自定義富文本樣式。利用富文本樣式, 可以在標簽中做出非常豐富的效果。Object類型。

9. 例子

9.1.?代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>坐標軸</title><!-- 引入echarts.js --><script type="text/javascript" src="echarts.js"></script></head><body><!-- 為ECharts準備一個具備大小(寬高)的DOM --><div id="main" style="width: 1200px; height: 600px;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '坐標軸'},// 配置提示信息tooltip: {// 觸發類型trigger: 'axis', // axis坐標軸觸發, 主要在柱狀圖, 折線圖等會使用類目軸的圖表中使用。// 坐標軸指示器是指示坐標軸當前刻度的工具axisPointer: { type: 'cross' // cross十字準星指示器。}},// 配置要在X軸顯示的項xAxis: [{type: 'category',axisTick: {alignWithLabel: true},data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}],// 配置要在Y軸顯示的項yAxis: [{type: 'value',name: '降水量',min: 0,max: 250,position: 'right',axisLabel: {formatter: '{value} ml'}},{type: 'value',name: '溫度',min: 0,max: 25,position: 'left',axisLabel: {formatter: '{value} °C'}}],// 系列列表series: [{name: '降水量',type: 'bar',yAxisIndex: 0,data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]},{name: '溫度',type: 'line',smooth: true,yAxisIndex: 1,data: [6.0,10.2,10.3,11.5,10.3,13.2,14.3,16.4,18.0,16.5,12.0,5.2]}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>

9.2.?效果圖

總結

以上是生活随笔為你收集整理的011_坐标轴的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。