使用 ECharts 在 Vue3 中柱状图的完整配置解析

一、初始化图表实例

const chart = echarts.init(chartRef.value);

二、Tooltip 提示配置

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'line' // 支持 'line' 或 'shadow' 类型，指示器样式
  },
  backgroundColor: 'rgba(0,0,0,0.7)',
  textStyle: { color: '#fff' },
  formatter: '{b}：{c}人' // 显示格式：类目名 + 数据值 + 单位
}

悬浮提示框在用户鼠标滑过柱状图时展示详细数据，设置了黑色半透明背景与白色文字以适配深色主题。 

三、图表网格布局

grid: {
  top: 60,
  left: 40,
  right: 60,
  bottom: 40
}

合理留白设置避免图表元素与边缘重叠，确保文字标签完整显示。 

四、X轴配置（年龄段）

xAxis: {
  name: '年龄',
  type: 'category',
  data: ['60~70岁', '70~80岁', '80~90岁', '90~100岁', '100岁以上'],
  axisLine: { lineStyle: { color: '#ccc' } },
  axisLabel: { color: '#fff' },
  nameTextStyle: {
    color: '#fff',
    fontSize: 14
  }
}

设置分类类型 X 轴，标签为不同年龄段，轴线与标签样式统一使用白色字体提升可读性。 

五、Y轴配置（人数）

yAxis: {
  type: 'value',
  name: '人数',
  axisLine: { show: false },
  splitLine: { lineStyle: { color: '#3a3a3a' } },
  axisLabel: { color: '#fff' },
  nameTextStyle: {
    color: '#fff',
    fontSize: 14,
    padding: [10, 0, 10, -30]
  }
}

数值型 Y 轴，隐藏轴线、添加灰色分隔线，使用 padding 将坐标轴名称左移以避免与坐标轴重叠。 

 六、Series 配置（柱状图样式）

series: [{
  type: 'bar',
  data: [300, 580, 760, 500, 100],
  barWidth: 30,
  itemStyle: {
    borderRadius: [5, 5, 0, 0], // 圆角处理
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#33ffff' },
      { offset: 1, color: '#0c6c88' }
    ])
  },
  label: { show: false }
}]

 七、注意事项以及配置项解释

① grid 配置项控制什么？

grid 控制的是图表绘图区（也叫“网格区域”）在整个 echarts 容器中的位置和大小，主要作用是控制图表四周的边距，比如坐标轴标签、坐标轴名称、图例等是否会被遮挡或显示不全。

② y轴 name 是如何控制距离的？

• name 是坐标轴的名字，会显示在 x 轴下方（或 y 轴左边）。

• nameTextStyle 控制名字的样式，包括颜色、字体大小等。

• 若要精细控制 name 和坐标轴之间的距离，可使用 padding属性。

③ color: new echarts.graphic.LinearGradient(...) 是什么含义？

这是在设置柱状图的渐变颜色填充，LinearGradient 用于创建一个线性渐变色：

• 参数 (0, 0, 0, 1) 表示渐变方向：从上 (0) 到下 (1)

• offset: 0 表示顶部，颜色为 #33ffff

• offset: 1 表示底部，颜色为 #0c6c88

整体效果：柱子从上到下由亮青色渐变到深蓝绿色，提升视觉层次感。

八、完整代码