使用 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整体效果：柱子从上到下由亮青色渐变到深蓝绿色，提升视觉层次感。
八、完整代码
<template><div class="dashboard"><div class="header"><div class="item orange"><div class="label">服务站点</div><div class="value">56</div></div><div class="item cyan"><div class="label">居家护理员</div><div class="value">840</div></div><div class="item lime"><div class="label">助餐人员</div><div class="value">360</div></div></div><div ref="chartRef" class="chart"></div></div>
</template><script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';const chartRef = ref(null);onMounted(() => {const chart = echarts.init(chartRef.value);chart.setOption({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},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, // 增大字体大小},},yAxis: {type: 'value',name: '人数',nameTextStyle: { color: '#fff', padding: [0, 0, 10, 0] },axisLine: { show: false },splitLine: { lineStyle: { color: '#3a3a3a' } },axisLabel: { color: '#fff' },nameTextStyle: {color: '#fff',fontSize: 14, // 增大字体大小padding: [10, 0, 10, -30], // 增加左侧的间距，使名字向左移动},},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}}]});
});
</script><style scoped>
.dashboard {background: #001c3c;padding: 20px;color: #fff;
}.header {display: flex;justify-content: space-around;margin-bottom: 20px;text-align: center;
}.item {flex: 1;
}.label {font-size: 20px;color: #fff;
}.value {font-size: 24px;font-weight: bold;
}.orange .value {color: #ff8800;
}.cyan .value {color: #33ffff;
}.lime .value {color: #aaff66;
}.chart {width: 100%;height: 200px;position: relative;top: -20px;
}
</style>