欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

echarts圖表中x軸和y軸的配置指南

 更新時間:2023年09月06日 11:31:41   作者:余道各努力,千里自同風  
這篇文章主要給大家介紹了關(guān)于echarts圖表中x軸和y軸的配置指南,文中通過代碼示例介紹的非常詳細,對大家學習或者使用echarts具有一定的參考借鑒價值,需要的朋友可以參考下

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)文章

最新評論