坐标轴(Axis)样式

坐标轴(Axis)样式

ECharts中的坐标轴样式控制是数据可视化中关键的一环，直接影响图表的可读性和美观度。通过调整坐标轴的线条、刻度、标签等属性，可以创建出符合不同场景需求的图表效果。

坐标轴类型

ECharts支持多种坐标轴类型，每种类型都有其特定的样式配置：

option = {
  xAxis: {
    type: 'category',  // 类目轴
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'  // 数值轴
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  }]
};

其他特殊类型还包括：

• time：时间轴，用于时间序列数据
• log：对数轴，用于数据跨度大的场景

轴线样式

轴线是坐标轴的基础组成部分，可以通过以下属性进行定制：

axisLine: {
  show: true,  // 是否显示轴线
  lineStyle: {
    color: '#6E7079',
    width: 2,
    type: 'solid',  // 可选'solid'|'dashed'|'dotted'
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10,
    shadowOffsetX: 3,
    shadowOffsetY: 3
  },
  symbol: ['none', 'arrow'],  // 两端箭头样式
  symbolSize: [10, 15],  // 箭头大小
  symbolOffset: [0, 10]  // 箭头偏移
}

刻度线样式

刻度线分为主刻度线和次刻度线，可以分别设置：

axisTick: {
  show: true,  // 是否显示刻度
  alignWithLabel: true,  // 刻度与标签对齐
  inside: false,  // 刻度是否朝内
  length: 5,  // 刻度长度
  lineStyle: {
    color: '#FF0000',
    width: 2,
    type: 'dashed'
  }
},
minorTick: {
  show: true,
  splitNumber: 5,  // 分割段数
  length: 3
}

刻度标签样式

刻度标签的样式控制提供了丰富的配置项：

axisLabel: {
  show: true,
  interval: 'auto',  // 标签显示间隔
  inside: false,  // 标签是否朝内
  rotate: 45,  // 旋转角度
  margin: 8,  // 与轴线的距离
  color: '#666',
  fontStyle: 'italic',
  fontWeight: 'bold',
  fontSize: 12,
  fontFamily: 'Arial',
  formatter: function(value, index) {
    // 自定义格式化函数
    return value + '°C';
  },
  rich: {
    // 富文本样式
    a: { color: 'red' },
    b: { backgroundColor: 'yellow' }
  }
}

网格线样式

网格线延伸自坐标轴刻度，可以增强图表的可读性：

splitLine: {
  show: true,
  interval: 'auto',
  lineStyle: {
    color: ['#E0E0E0'],
    width: 1,
    type: 'dashed',
    opacity: 0.7
  }
},
minorSplitLine: {
  show: true,
  lineStyle: {
    color: '#F0F0F0',
    width: 0.5
  }
}

坐标轴区域样式

坐标轴区域可以设置背景色和阴影效果：

axisPointer: {
  type: 'shadow',  // 阴影指示器
  shadowStyle: {
    color: 'rgba(150, 150, 150, 0.3)'
  }
},
areaStyle: {
  color: ['rgba(250, 250, 250, 0.3)', 'rgba(200, 200, 200, 0.3)'],
  origin: 'start'
}

多坐标轴配置

ECharts支持在一个图表中使用多个坐标轴：

yAxis: [
  {
    type: 'value',
    name: '降雨量',
    position: 'left',
    axisLabel: {
      formatter: '{value} ml'
    }
  },
  {
    type: 'value',
    name: '温度',
    position: 'right',
    axisLabel: {
      formatter: '{value} °C'
    },
    splitLine: {
      show: false  // 不显示网格线
    }
  }
]

极坐标轴样式

极坐标系下的坐标轴有特殊配置：

angleAxis: {
  type: 'category',
  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  startAngle: 90,
  clockwise: false,  // 逆时针
  axisLine: {
    show: true,
    symbol: ['none', 'arrow'],
    symbolSize: [10, 15]
  },
  splitLine: {
    show: true,
    lineStyle: {
      color: '#ddd',
      type: 'dashed'
    }
  }
},
radiusAxis: {
  type: 'value',
  min: 0,
  max: 100,
  interval: 20,
  axisLabel: {
    formatter: '{value}%'
  }
}

动态坐标轴样式

可以通过动画效果增强坐标轴的交互体验：

animation: true,
animationDuration: 1000,
animationEasing: 'elasticOut',
animationDelay: function(idx) {
  return idx * 200;
}

响应式坐标轴

在不同屏幕尺寸下调整坐标轴样式：

media: [
  {
    query: { maxWidth: 500 },
    option: {
      xAxis: {
        axisLabel: {
          fontSize: 8,
          rotate: 90
        }
      },
      yAxis: {
        axisLabel: {
          fontSize: 8
        }
      }
    }
  }
]

坐标轴事件交互

为坐标轴添加交互事件处理：

xAxis: {
  // ...其他配置
  axisPointer: {
    label: {
      show: true,
      backgroundColor: '#666',
      padding: [3, 5, 3, 5],
      borderRadius: 3
    }
  }
},
// 事件处理
myChart.on('axisAreaEnter', function(params) {
  console.log('鼠标进入坐标轴区域', params);
});
myChart.on('axisAreaLeave', function(params) {
  console.log('鼠标离开坐标轴区域', params);
});

坐标轴高级样式技巧

结合多个属性创建特殊效果：

xAxis: {
  type: 'category',
  boundaryGap: false,
  axisLine: {
    onZero: false,
    lineStyle: {
      color: '#c23531'
    }
  },
  axisLabel: {
    formatter: function(value) {
      return '{style|' + value + '}',
      rich: {
        style: {
          color: '#fff',
          padding: [3, 5],
          borderRadius: 4,
          backgroundColor: '#c23531'
        }
      }
    }
  },
  splitLine: {
    show: true,
    lineStyle: {
      type: 'dotted'
    }
  }
}