快捷導(dǎo)航

echarts控制x軸和y軸name位置并加軸箭頭代碼示例

更新時間：2024年01月03日 15:40:59 作者：barry--*/

搞數(shù)據(jù)展示,很多朋友都會用到免費的echarts,下面這篇文章主要給大家介紹了關(guān)于echarts控制x軸和y軸name位置并加軸箭頭的相關(guān)資料,需要的朋友可以參考下

1.0 未調(diào)整前位置

1.1 調(diào)整后

2.0 代碼：

const colors = ['#5470C6', '#91CC75', '#EE6666'];
option = {
  color: colors,
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    right: '20%'
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['Evaporation', 'Precipitation', 'Temperature']
  },
  xAxis: [
    {
      type: 'category',
      name:'月份',//x軸標題名稱
      nameTextStyle:{
        lineHeight:30, //標題行高
        verticalAlign:'top',//標題位置
      },
      axisTick: {
        alignWithLabel: true
      },
      // prettier-ignore
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '溫度',
      nameLocation:'end',
      nameTextStyle:{
        padding:[0,0,0,-40],//控制y軸標題位置
      },
      
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[2]
        }
      },
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: 'Evaporation',
      type: 'bar',
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ]
    }
  ]
};

3.0 加上坐標軸箭頭

3.2 代碼

const colors = ['#5470C6', '#91CC75', '#EE6666'];
option = {
  color: colors,
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    right: '20%'
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['Evaporation', 'Precipitation', 'Temperature']
  },
  xAxis: [
    {
      type: 'category',
      name:'月份',//x軸標題名稱
      nameTextStyle:{
        lineHeight:30, //標題行高
        verticalAlign:'top',//標題位置
      },
      //添加箭頭
      axisLine:{
        symbol:['none','path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20 '],
        symbolOffset:10,//箭頭距離x軸末端距離
        symbolSize:[35,38]//箭頭的寬高
      },
      axisTick: {
        alignWithLabel: true
      },
      // prettier-ignore
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '溫度',
      nameLocation:'end',
      nameTextStyle:{
        padding:[0,0,0,-40],//控制y軸標題位置
      },
      
      alignTicks: true,
      axisLine: {
        symbol:['none','path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20 '],
        symbolSize:[35,38],//箭頭的寬高
        symbolOffset:10,//箭頭距離x軸末端距離
        show: true,
        lineStyle: {
          color: colors[2]
        }
      },
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: 'Evaporation',
      type: 'bar',
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ]
    }
  ]
};

總結(jié)

到此這篇關(guān)于echarts控制x軸和y軸name位置并加軸箭頭的文章就介紹到這了,更多相關(guān)echarts控制name位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: