ECharts 3D柱状图组件开发实战：Bar3D.vue 完整解析

原创

已于 2025-10-28 16:14:22 修改 · 385 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #3d #信息可视化

于 2025-10-28 16:08:29 首次发布

本文将详细解析一个基于 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 = 0

    data.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].dataIndex
    const 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>