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

ECharts图表x轴与y轴name的位置调整需求是：![需求图](https://img-blog.csdnimg.cn/e387ad8e86ca484d963693ce38982a7b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6bit5qKo5aSn5ZGy6Iqx,size_20

阿鬼Ghost

33653人浏览 · 2022-02-16 12:28:30

阿鬼Ghost · 2022-02-16 12:28:30 发布

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'
  }