亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

xAxis與yAxis中有很多配置項(xiàng),下面我以xAxis進(jìn)行詳解,yAxis參考xAxis即可

nameTextStyle:坐標(biāo)軸名稱的文字樣式

axisLine:坐標(biāo)軸軸線相關(guān)設(shè)置。

axisTick:坐標(biāo)軸刻度相關(guān)設(shè)置。

axisLabel:坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。

splitLine: 坐標(biāo)軸在 grid 區(qū)域中的分隔線設(shè)置。

splitArea :坐標(biāo)軸在 grid 區(qū)域中的分隔區(qū)域,默認(rèn)不顯示。

上述xAxis與yAxis中的配置項(xiàng),其中也會(huì)含有很多屬性,具體使用請(qǐng)參考一下內(nèi)容。

xAxis: {
  id: '',
  show: true, //是否顯示x軸
  gridIndex: 0, //軸所在grid索引,默認(rèn)位于第一個(gè)grid
  alignTicks: false, //在多個(gè)軸為數(shù)值軸的時(shí)候,可以開(kāi)啟該配置項(xiàng)自動(dòng)對(duì)齊刻度。只對(duì)'value'和'log'類型的軸有效
  position: 'top', //軸的位置(top/bottom) 
  offset: 0, //軸相對(duì)于默認(rèn)位置的偏移,在相同的position上有多個(gè)軸時(shí)有用
  type: 'category', //坐標(biāo)軸類型,值category/value,與y軸呼應(yīng),若x軸配置category則y軸配置value
  name: '', //坐標(biāo)軸名稱
  nameLocation: 'end', //坐標(biāo)軸名稱顯示位置,可選值start/middle[或者center]/end
  nameTextStyle: {}, //一般樣式也很少直接修改且內(nèi)容過(guò)多待更新... ...
  nameGap: 15, //坐標(biāo)軸名稱與軸線間距離
  nameRotate: 10, //坐標(biāo)軸名字旋轉(zhuǎn),角度值
  inverse: false, //是否是反向坐標(biāo)軸
  boundaryGap: ['20%', '20%'],    // 坐標(biāo)軸兩邊留白策略,也可以使用布爾值,true居中
  min: '', //刻度最小值
  max: '', //刻度最大值
  scale: false, //只在數(shù)值軸中type: 'value'有效, 設(shè)置min和max后無(wú)效。是否是脫離 0 值比例。設(shè)置成true后坐標(biāo)刻度不會(huì)強(qiáng)制包含零刻度。在雙數(shù)值軸的散點(diǎn)圖中較有用
  splitNumber: 5, //坐標(biāo)軸的分割段數(shù)(預(yù)估值)
  minInterval: 0, //自動(dòng)計(jì)算坐標(biāo)軸最小間隔,例:設(shè)置成1,刻度沒(méi)有小數(shù)
  maxInterval: '', //自動(dòng)計(jì)算坐標(biāo)軸最大間隔
  axisLine: {
    show: true,    // 是否顯示坐標(biāo)軸軸線
    symbol: ['none', 'arrow'],     // 軸線兩端箭頭,兩個(gè)值,none表示沒(méi)有箭頭,arrow表示有箭頭
    symbolSize: [10, 15],     // 軸線兩端箭頭大小,數(shù)值一表示寬度,數(shù)值二表示高度
    lineStyle: {
      color: '#333',    // 坐標(biāo)軸線線的顏色
      width: '5',    // 坐標(biāo)軸線線寬
      type: 'solid',    // 坐標(biāo)軸線線的類型(solid實(shí)線類型;dashed虛線類型;dotted點(diǎn)狀類型)
    },
  },
  axisTick: {
    show: true,    // 是否顯示坐標(biāo)軸刻度
    inside: true,     // 坐標(biāo)軸刻度是否朝內(nèi),默認(rèn)朝外
    length: 5,    //坐標(biāo)軸刻度的長(zhǎng)度        
    lineStyle: {
      color: '#FFF',     //刻度線的顏色
      width: 10,    //坐標(biāo)軸刻度線寬
      type: 'solid',    //坐標(biāo)軸線線的類型(solid實(shí)線類型;dashed虛線類型;dotted點(diǎn)狀類型)
    },
  },
  axisLabel: {
    show: true, //是否顯示刻度標(biāo)簽
    interval: '0',  //坐標(biāo)軸刻度標(biāo)簽的顯示間隔,在類目軸中有效.0顯示所有
    inside: true, //刻度標(biāo)簽是否朝內(nèi),默認(rèn)朝外
    rotate: 90, //刻度標(biāo)簽旋轉(zhuǎn)的角度,在類目軸的類目標(biāo)簽顯示不下的時(shí)候可以通過(guò)旋轉(zhuǎn)防止標(biāo)簽之間重疊;旋轉(zhuǎn)的角度從-90度到90度
    margin: 10,  //刻度標(biāo)簽與軸線之間的距離
    // formatter 刻度標(biāo)簽的內(nèi)容格式器,支持字符串模板和回調(diào)函數(shù)兩種形式
    color: '#FFF',   // 刻度標(biāo)簽文字的顏色
    fontStyle: 'normal',  // 字體的風(fēng)格(normal無(wú)樣式;italic斜體;oblique傾斜字體)         
    fontWeight: 'normal',  // 字體的粗細(xì)(normal無(wú)樣式;bold加粗;bolder加粗再加粗;lighter變細(xì);數(shù)字定義粗細(xì)也可以取值范圍100至700)
    fontSize: '20', //文字字體大小
    align: 'left',     // 文字水平對(duì)齊方式,默認(rèn)自動(dòng)(left/center/right)
    verticalAlign: 'left',    // 文字垂直對(duì)齊方式,默認(rèn)自動(dòng)(top/middle/bottom)
    lineHeight: '50',    // 行高
    backgroundColor: 'red', // 文字塊背景色,例:#123234, red, rgba(0,23,11,0.3)
  },
  splitLine: {
    show: true,    // 是否顯示分隔線。默認(rèn)數(shù)值軸顯示,類目軸不顯示
    interval: '0',    // 坐標(biāo)軸刻度標(biāo)簽的顯示間隔,在類目軸中有效.0顯示所有        
    color: ['#ccc'], //color分隔線顏色,可設(shè)置單個(gè)顏色,也可設(shè)置顏色數(shù)組,分隔線會(huì)按數(shù)組中顏色順序依次循環(huán)設(shè)置顏色
    width: 3, // 分隔線線寬
    type: 'solid', // 坐標(biāo)軸線線的類型(solid實(shí)線類型;dashed虛線類型;dotted點(diǎn)狀類型)
  },
  splitArea: {
    show: true, // 是否顯示分隔區(qū)域
    interval: '0', // 坐標(biāo)軸刻度標(biāo)簽的顯示間隔,在類目軸中有效.0顯示所有
    areaStyle: {           
      color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], //color分隔區(qū)域顏色。分隔區(qū)會(huì)按數(shù)組中顏色順序依次循環(huán)設(shè)置顏色。默認(rèn)是一個(gè)深淺的間隔色
      opacity: 1, // 圖形透明度。支持從0到1的數(shù)字,為0時(shí)不繪制該圖形
    },
  },
  data: {
    textStyle: {
      color: '#FFF', // 文字的顏色
      fontStyle: 'normal', // 文字字體的風(fēng)格(normal無(wú)樣式;italic斜體;oblique傾斜字體)             
      fontWeight: 'normal', //字體的粗細(xì)(normal無(wú)樣式;bold加粗;bolder加粗再加粗;lighter變細(xì);數(shù)字定義粗細(xì)也可以取值范圍100至700)
      fontSize: '20', // 文字字體大小
      align: 'left', // 文字水平對(duì)齊方式,默認(rèn)自動(dòng)(left/center/right)
      verticalAlign: 'left', // 文字垂直對(duì)齊方式,默認(rèn)自動(dòng)(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論