ECharts 3D柱状图组件开发实战：Bar3D.vue 完整解析
本文将详细解析一个基于 Vue 3 和 ECharts 的 3D 柱状图组件开发过程，展示如何创建美观、可复用的数据可视化组件。
组件概述
Bar3D.vue 是一个专业的 3D 柱状图 Vue 组件，具有以下特点：
-
3D立体效果：通过多层图形叠加实现立体视觉
-
丰富的交互：支持悬停提示、动态效果
-
高度可定制：颜色、尺寸、数据均可配置
-
响应式设计：自动适应容器大小
核心代码解析
1. 组件参数定义
const props = defineProps({data: {type: Array,default: () => [{name: '项目一',value: 175.17,},// ... 更多数据]},backgroundColor: {type: String,default: 'transparent'},unit: {type: String,default: ''},barWidth: {type: Number,default: 12}
})2. 颜色配置系统
组件内置了精心设计的颜色配置，确保视觉效果协调统一：
const colorConfig = {ciolColor1: ['rgba(64, 158, 255, 1)','rgba(19, 194, 194, 1)','rgba(247, 186, 41, 1)',// ... 更多颜色],// ... 其他颜色组
}3. 数据处理逻辑
const processData = (data) => {const xAxisData = []const seriesData = []let sum = 0data.forEach((item) => {xAxisData.push(item.name)seriesData.push(item.value)sum += item.value})// 计算底部和顶部数据const bottomData = data.map(item => ({ name: '', value: sum - item.value }))const topData = data.map(() => ({ name: '', value: sum }))return {xAxisData,seriesData,bottomData,topData,sum}
}4. 3D效果实现原理
组件通过多个系列叠加实现3D效果：
-
底部圆片：使用
effectScatter创建底座发光效果 -
主体柱状图：渐变色彩的柱体，带有圆角设计
-
顶部装饰：使用
pictorialBar创建立体顶部 -
背景底色：半透明背景增强层次感
// 动态计算尺寸，确保比例协调
const barWidth = props.barWidth
const symbolHeight = Math.max(2, barWidth * 0.15)
const symbolOffset = Math.max(1, barWidth * 0.08)5. 自定义提示框
formatter: function (params) {const index = params[0].dataIndexconst color = colorConfig.ciolColor1[index % colorConfig.ciolColor1.length]const name = processedData.xAxisData[index]const value = processedData.seriesData[index]return `<div style="font-size: 14px; padding: 8px;"><div style="display: flex; align-items: center; margin-bottom: 4px;"><span style="display: inline-block; width: 8px; height: 8px; background: ${color}; border-radius: 50%; margin-right: 8px;"></span><span style="font-weight: 600;">${name}</span></div><div style="color: rgba(255, 255, 255, 0.8);">数值: ${value}${props.unit}</div></div>`
}使用示例
基础使用
<template><div class="chart-container"><Bar3D :data="chartData" unit="万元" /></div>
</template><script setup>
import Bar3D from '@/components/Bar3D.vue'const chartData = [{ name: '产品A', value: 245.67 },{ name: '产品B', value: 189.32 },{ name: '产品C', value: 156.89 },{ name: '产品D', value: 203.45 }
]
</script>