坐标轴(Axis)样式

坐标轴(Axis)样式

坐标轴是数据可视化图表中不可或缺的组成部分，它直接影响着数据的呈现方式和用户的阅读体验。在ECharts中，坐标轴的样式配置非常灵活，可以通过多种属性实现个性化的视觉效果。

坐标轴类型

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

1. 数值轴（value）：用于连续数值数据
2. 类目轴（category）：用于离散的类目数据
3. 时间轴（time）：用于时间序列数据
4. 对数轴（log）：用于对数变换后的数值

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

轴线样式

轴线是坐标轴的基础元素，可以通过以下属性进行样式设置：

• axisLine.show：是否显示轴线
• axisLine.lineStyle.color：轴线颜色
• axisLine.lineStyle.width：轴线宽度
• axisLine.lineStyle.type：轴线类型（实线、虚线等）

xAxis: {
  axisLine: {
    show: true,
    lineStyle: {
      color: '#FF0000',
      width: 2,
      type: 'dashed'
    }
  }
}

刻度样式

刻度是坐标轴上标记数值或类目的短线，可以通过以下属性配置：

• axisTick.show：是否显示刻度
• axisTick.length：刻度长度
• axisTick.lineStyle：刻度线样式
• axisTick.interval：刻度间隔

yAxis: {
  axisTick: {
    show: true,
    length: 10,
    lineStyle: {
      color: '#333',
      width: 1
    },
    inside: true  // 刻度朝内
  }
}

刻度标签样式

刻度标签是坐标轴上显示的文字，可以通过以下属性进行配置：

• axisLabel.show：是否显示标签
• axisLabel.color：标签颜色
• axisLabel.fontSize：字体大小
• axisLabel.rotate：旋转角度
• axisLabel.formatter：格式化函数

xAxis: {
  axisLabel: {
    show: true,
    color: '#666',
    fontSize: 12,
    rotate: 45,
    formatter: function(value) {
      return value.substring(0, 3);  // 只显示前三个字符
    }
  }
}

网格线样式

网格线是从坐标轴延伸出的参考线，可以通过以下属性配置：

• splitLine.show：是否显示网格线
• splitLine.lineStyle.color：网格线颜色
• splitLine.lineStyle.width：网格线宽度
• splitLine.lineStyle.type：网格线类型

yAxis: {
  splitLine: {
    show: true,
    lineStyle: {
      color: ['#eee'],
      width: 1,
      type: 'solid'
    }
  }
}

坐标轴区域样式

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

• axisPointer：坐标轴指示器配置
• areaStyle：区域填充样式

yAxis: {
  axisPointer: {
    show: true,
    type: 'shadow',
    label: {
      show: true
    }
  }
}

多坐标轴配置

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

option = {
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      position: 'bottom'
    },
    {
      type: 'category',
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
      position: 'top'
    }
  ],
  yAxis: [
    {
      type: 'value',
      position: 'left'
    },
    {
      type: 'value',
      position: 'right'
    }
  ],
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      xAxisIndex: 0,
      yAxisIndex: 0
    },
    {
      data: [100, 200, 300, 400, 500, 600, 700],
      type: 'line',
      xAxisIndex: 1,
      yAxisIndex: 1
    }
  ]
};

坐标轴位置与对齐

坐标轴的位置可以通过以下属性控制：

• position：坐标轴位置（top/bottom/left/right）
• offset：坐标轴偏移量
• alignTicks：是否对齐刻度

yAxis: {
  position: 'right',
  offset: 20,
  alignTicks: true
}

坐标轴缩放与范围

可以通过以下属性控制坐标轴的显示范围：

• min：最小值
• max：最大值
• scale：是否开启缩放
• minInterval：最小间隔

yAxis: {
  min: 0,
  max: 2000,
  scale: true,
  minInterval: 100
}

坐标轴动画效果

ECharts支持为坐标轴添加动画效果：

• animation：是否开启动画
• animationDuration：动画时长
• animationEasing：动画缓动函数

xAxis: {
  animation: true,
  animationDuration: 1000,
  animationEasing: 'elasticOut'
}

响应式坐标轴配置

可以通过媒体查询实现响应式的坐标轴配置：

option = {
  // 基础配置
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLabel: {
      fontSize: 12
    }
  },
  media: [
    {
      query: {
        maxWidth: 500
      },
      option: {
        xAxis: {
          axisLabel: {
            fontSize: 8,
            rotate: 45
          }
        }
      }
    }
  ]
};

坐标轴事件处理

可以为坐标轴添加各种交互事件：

myChart.on('axisMouseover', function(params) {
  console.log('鼠标移入坐标轴', params);
});

myChart.on('axisMouseout', function(params) {
  console.log('鼠标移出坐标轴', params);
});

myChart.on('axisClick', function(params) {
  console.log('点击坐标轴', params);
});

坐标轴高级样式

对于更复杂的样式需求，可以使用富文本配置：

xAxis: {
  axisLabel: {
    formatter: function(value) {
      return `{a|${value}}\n{b|详情}`;
    },
    rich: {
      a: {
        color: 'red',
        fontSize: 16
      },
      b: {
        color: 'blue',
        fontSize: 12
      }
    }
  }
}

坐标轴与主题集成

ECharts的主题系统可以统一管理坐标轴样式：

// 注册主题
echarts.registerTheme('myTheme', {
  xAxis: {
    axisLine: {
      lineStyle: {
        color: '#ff0000'
      }
    }
  },
  yAxis: {
    axisLine: {
      lineStyle: {
        color: '#00ff00'
      }
    }
  }
});

// 使用主题
var myChart = echarts.init(document.getElementById('main'), 'myTheme');