ECharts图表x轴与y轴name的位置调整

原创已于 2022-02-24 09:52:14 修改 · 4w 阅读

56 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2022-02-16 12:28:30 首次发布

本文详细指导如何在ECharts中调整x轴和y轴的名称位置，包括nameLocation属性，旋转角度，以及nameTextStyle的样式设置。提供实际代码示例，并根据图表动态调整nameGap以达到理想布局。

ECharts图表x轴与y轴name的位置调整

需求见下图

需求图

正常直接给x，y添加完name的样子

 xAxis: {
    name: 'x轴name',
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    name: 'y轴name',
    type: 'value'
  }

添加完name的情况图

调整代码及图示

xAxis: {
    name: 'x轴name',
    nameTextStyle: { // x轴name的样式调整
      color: '#000', 
      fontSize: 22,
    },
    nameGap: 50,  // x轴name与横坐标轴线的间距
    nameLocation: "middle", // x轴name处于x轴的什么位置
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    name: 'y轴name',
    nameTextStyle: {  // y轴name的样式调整
      color: '#000',
      fontSize: 22,
    },
    nameRotate: 90, // y轴name旋转90度 使其垂直
    nameGap: 50,  // y轴name与横纵坐标轴线的间距
    nameLocation: "middle", // y轴name处于y轴的什么位置
    type: 'value'
  },

第一步图片

最终调整结果代码及图示

xAxis: {
    name: 'x轴name',
    nameTextStyle: { // x轴name的样式调整
      color: '#000', 
      fontSize: 22,
      padding:[0,0,0,0,0]  // 加上padding可以调整其位置
    },
    nameGap: -1040,  // 通过你生成的图表来调整
    nameLocation: "middle", // x轴name处于x轴的什么位置
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    name: 'y轴name',
    nameTextStyle: {  // y轴name的样式调整
      color: '#000',
      fontSize: 22,
      padding:[0,0,0,0] // 加上padding可以调整其位置
    },
    nameRotate: -90, // 因为是在rightMiddle 所以需要其翻转 将其改为负值
    nameGap: -1240,  // 通过你生成的图表来调整
    nameLocation: "middle", // y轴name处于y轴的什么位置
    type: 'value'
  }

最终图示