作为一名前端er，数据可视化是日常工作中不可或缺的一部分。ECharts 凭借其强大的功能和丰富的图表类型，一直是我的首选。

最近，我尝试用 Vue3 结合 ECharts 实现了一些炫酷的立体柱状图效果，在此分享给大家，希望能帮助大家更好地展示数据。

一、引言：为什么要使用立体柱状图？

传统的柱状图虽然简单明了，但在数据量较大或者需要突出展示效果时，略显单调。立体柱状图通过其三维效果，能够更直观地展示数据的差异，增强视觉冲击力，让你的数据更具表现力。

本文将结合 Vue3 和 ECharts，通过三种不同的方式，手把手教你打造令人眼前一亮的立体柱状图：

  1. 基础立体柱状图： 利用 pictorialBar 实现真正的立体效果，简单易上手。
  2. 渐变色立体柱状图： 添加渐变色，让你的柱状图更具层次感和现代感。
  3. 矩形立体柱状图： 使用多个 pictorialBar 和 bar 组合，创造出更丰富的视觉效果。

二、准备工作

  1. 安装依赖： 确保你的项目中安装了 echarts。

    npm install echarts --save
# 或者
yarn add echarts

  2. 项目结构： 本文的代码基于 Vue3 + Vite 构建的项目。

  3. 核心代码： 以下是 Vue 组件的代码结构，我们将在这个基础上进行改造。

    <template>
  <div class="container">
    <div class="chart-item" ref="container"></div>
    <div class="chart-item" ref="gradientContainer"></div>
    <div class="chart-item" ref="rectContainer"></div>
  </div>
</template>

<script setup>
import useEcharts from '@/hooks/useEcharts'

const colorList = ['#872425','#828320','#af8b00','#a35c1e','#2b4f5c','#b0674b','#748948','#89282b']
const xAxisData = ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
const seriesData = [2000, 1000, 3000, 5000, 8000, 1000]

// 这里留白，稍后填充不同类型的柱状图配置

</script>

<style scoped>
.container{
  display: flex;
  flex-wrap: wrap;
}
.chart-item{
  width:50%;
  height:300px;
}
</style>

    其中，useEcharts 是一个自定义 Hook，用于初始化 ECharts 实例。这里先简单占位，具体实现将在后面给出。

三、实现步骤

1. 基础立体柱状图
  • 代码解析：
```javascript
const { container } = useEcharts(createOption())

function createOption() {
  return {
    title: {
      text: '立体柱状图',
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        type: 'pictorialBar',
        symbolSize: [30, 11],
        symbolPosition: 'end',
        symbolOffset: [0, -5],
        itemStyle:{
          color: (params) => {
            return colorList[params.dataIndex]
          },
          opacity:0.5
        },
        z: 5,
        data: seriesData,
      },
      {
        type: 'pictorialBar',
        symbolSize: [30, 11],
        itemStyle:{
          color: (params) => {
            return colorList[params.dataIndex]
          }
        },
        z: 5,
        data: seriesData,
      },
      {
        type: 'bar',
        barWidth: 30,
        itemStyle:{
          color: (params) => {
            return colorList[params.dataIndex]
          }
        },
        data: seriesData,
      },
    ],
  }
}
```

*   **`pictorialBar` 类型：**  `pictorialBar` 是 ECharts 提供的象形柱图，可以自定义柱子的形状。我们这里利用它来创建柱子的顶面和侧面，从而模拟立体效果。
*   **`symbolSize`：**  控制象形柱图的大小，这里设置了 `[30, 11]`，控制了柱子的宽度和厚度。
*   **`symbolPosition: 'end'`：** 将顶面放置在柱子的顶部。
*   **`symbolOffset`：**  调整顶面的位置，使其与柱子完美衔接。
*   **`z`：**  控制图层的层叠顺序，确保顶面在柱子上方。
*   **`opacity`：** 控制顶面的透明度，使立体效果更加自然。
*   **`bar` 类型：** 实际的柱子使用 `bar` 类型，并设置 `barWidth` 来控制宽度。
*   **`colorList`：** 定义颜色数组，根据数据索引动态设置柱子的颜色。
  • 效果展示：

在这里插入图片描述

2. 渐变色立体柱状图
  • 代码解析：
```javascript
const {container:gradientContainer} = useEcharts({
  title:{
    text:'渐变柱状图'
  },
  xAxis:{
    type:'category',
    data:xAxisData
  },
  yAxis:{
    type:'value'
  },
  series:[{
    type:'bar',
    barWidth:20,
    itemStyle:{
      borderRadius:10,
      color:{
        type:'linear',
        x:0,
        y:0,
        x2:1,
        y2:1,
        colorStops:[{
          offset:0,
          color:'rgba(199,114,34,1)'
        },{
          offset:1,
          color:'rgba(255,255,255,0)'

        }]
      }
    },
    data:seriesData
  }]
})
```

*   **`itemStyle.color`：**  通过设置 `itemStyle.color` 为线性渐变 (`linear`)，可以实现柱子的渐变效果。
*   **`colorStops`：**  定义渐变的颜色和位置。`offset` 为 0 表示起始颜色，`offset` 为 1 表示结束颜色。
*   **`x`, `y`, `x2`, `y2`：**  控制渐变的方向。`x: 0, y: 0, x2: 1, y2: 1` 表示从左上角到右下角的渐变。
*   **`borderRadius`：** 设置柱子圆角，增加美观性。
  • 效果展示：

在这里插入图片描述

3. 矩形堆叠立体柱状图
  • 代码解析：
```javascript
const {container:rectContainer} = useEcharts({
  title:{
    text:'矩形柱状图'
  },
  xAxis:{
    type:'category',
    data:xAxisData
  },
  yAxis:{
    type:'value'
  },
  series:[{
    type:'pictorialBar',
    symbol:'diamond',
    symbolOffset:[0,-5],
    symbolSize:[30,11],
    symbolPosition:'end',
    data:seriesData,
    itemStyle:{
      color:'rgb(199,114,34)'
    }
  },{
    type:'bar',
    barWidth:15,
    itemStyle:{
      color:{
        type:'linear',
        x:0,
        y:0,
        x2:1,
        y2:1,
        colorStops:[{
          offset:0,
          color:'rgb(199,114,34)'
        },{
          offset:1,
          color:'rgb(255,255,255)'
        }]
      }

    },
    data:seriesData
  },{
    type:'bar',
    barWidth:15,
    barGap:0,
    // barCategoryGap:0,
    itemStyle:{
      color:{
        type:'linear',
        x:0,
        y:0,
        x2:1,
        y2:1,
        colorStops:[{
          offset:0,
          color:'rgb(199,114,34)'
        },{
          offset:1,
          color:'rgb(255,255,255)'
        }]
      }
    },
    data:seriesData
  }]
})
```

*   **`symbol: 'diamond'`：** 使用菱形作为柱子的顶面形状。
*   **多个 `bar` 组合：** 通过设置 `barWidth` 和 `barGap`，将两个 `bar` 紧密排列，模拟柱子的侧面效果。
*   **`barGap: 0`：**  将柱子之间的间距设置为 0，使其紧密相连。
*   **`itemStyle.color`：** 仍然使用渐变色，增强视觉效果。
  • 效果展示：

在这里插入图片描述

四、useEcharts Hook 的实现

// src/hooks/useEcharts.js
import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted } from 'vue'

export default function useEcharts(options) {
  const container = ref(null)
  let chartInstance = null

  onMounted(() => {
    chartInstance = echarts.init(container.value)
    chartInstance.setOption(options)

    // 自适应屏幕大小
    window.addEventListener('resize', resizeChart)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', resizeChart)
    chartInstance.dispose()
  })

  const resizeChart = () => {
    chartInstance.resize()
  }

  return { container }
}
  • 引入 ECharts： import * as echarts from 'echarts' 引入 ECharts 库。
  • 创建 ref： const container = ref(null) 创建一个 ref，用于获取 DOM 元素。
  • 初始化 ECharts 实例： chartInstance = echarts.init(container.value) 初始化 ECharts 实例，并将其绑定到 DOM 元素。
  • 设置配置项： chartInstance.setOption(options) 设置 ECharts 的配置项。
  • 自适应屏幕大小： 监听 resize 事件，并在事件触发时调用 resizeChart 函数，使图表自适应屏幕大小。
  • 销毁 ECharts 实例： 在组件卸载时，调用 chartInstance.dispose() 销毁 ECharts 实例，防止内存泄漏。

五、总结

本文通过三种不同的方式，介绍了如何使用 Vue3 和 ECharts 实现炫酷的立体柱状图效果。每种方式都有其特点，你可以根据实际需求选择合适的方式。希望本文能帮助你更好地展示数据，提升数据可视化的效果。

# echarts # 信息可视化 # 前端
Logo
永洪数据分析社区

永洪科技，致力于打造全球领先的数据技术厂商，具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。

更多推荐

cover

数据挖掘是什么？数据挖掘技术有哪些？

avatar 永洪数据分析社区
cover

【精选】计算机毕业设计Python Flask海口天气数据分析可视化系统 气象数据采集处理 天气趋势图表展示 数据可视化平台源码+论文+PPT+讲解

avatar 永洪数据分析社区
cover

华为云Flexus+DeepSeek征文｜基于华为云一键部署Dify平台，接入DeepSeek大模型，构建数据可视化助手应用实战指南

avatar 永洪数据分析社区