ECharts 3D柱状图的特点

真实感的视觉效果：3D 柱状图可以带给用户一种更真实的数据展示体验，通过立体的效果，使数据更加生动和易于理解。
多维数据展示：3D 柱状图可以同时展示三个维度的数据，通过横轴、纵轴和纵深轴来表示不同维度的变量，帮助展示多维度的数据分布情况。
视角控制：ECharts 的 3D 柱状图支持视角控制，用户可以通过交互操作调整图表的视角，包括旋转、缩放和平移等，以便于更好地观察和分析数据。
多样化的视觉配置：3D 柱状图支持丰富的样式配置选项，可以自定义柱形的颜色、透明度、光照效果等，使图表更具个性化和美观性。
数据标签展示：可以在每个立体柱形上显示对应的数据标签，帮助用户直观地了解具体数值，提高数据解读的准确性。
强调特定数据：由于3D柱状图具有更多的维度，可以将关键数据放在不同的空间位置，以突出特定的数据或者数据间的差异。这可以帮助观众快速识别关键信息，并对比数据之间的差异。

ECharts 3D柱状图的应用场景

与二维柱状图相比，3D柱状图更注重空间数据的表达，在应用场景上也和二维柱状图不完全相同，常用于下面场景中

地理信息可视化：使用3D柱状图可以在地理空间中展示不同地区的数据分布和差异。例如，在地图上显示各地区的销售额、人口数量等，通过柱状图的高度或颜色区分不同数值。
科学模拟和仿真：对于科学研究、工程建模等领域，3D柱状图可以用来可视化各种模拟和仿真结果。例如，在气候模拟中，可以使用柱状图展示气温、降水等因素的变化。
产品展示和设计：在产品展示中，可以使用3D柱状图来展示产品的销售数据或用户评分等相关信息。此外，在建筑、工业设计等领域中也可以使用3D柱状图来可视化设计方案或产品原型。
数据分析和报告：对于数据分析和报告，3D柱状图可以用于比较不同类别或维度的数据。例如，通过3D柱状图展示不同时间段的销售数据，以及不同产品或地区之间的销售对比。

3D 柱状图与二维柱状图的优缺点

3D 柱状图的优点：

空间感强：3D 柱状图可以在第三维度上展示数据，呈现出更加逼真的立体效果，给用户带来更直观的感受和空间感。
视觉冲击力：通过立体效果，可以给数据图表增加一定的视觉冲击力，使得柱状图更加引人注目，吸引用户的注意力。
更好的数据展示：对于复杂的数据集或需要展示多个维度的情况，3D 柱状图能够更好地展示数据之间的关系和变化趋势。

3D 柱状图的缺点：

可能导致信息失真：立体效果可能会造成某些柱状的部分被遮挡或变形，导致一定程度上的信息失真。
视觉混乱：复杂的立体效果可能会导致视觉上的混乱，使柱状图的阅读变得较为困难。
容易分散注意力：立体效果可能会让用户过于关注视觉效果本身，而不再关注数据本身，容易分散注意力。

二维柱状图的优点：

简洁明了：二维柱状图以平面方式展示数据，简洁明了，容易理解和解读。
直接表达：二维柱状图直接表达数据的大小和比较，没有立体效果的干扰，更加突出数据本身的特点。
易于比较：二维柱状图的水平或垂直方向上的长度可以直观地用于比较数据之间的差异。

二维柱状图的缺点：

数据表达有限：二维柱状图只能在两个维度上展示数据，对于含有更多维度的数据集可能无法完全表达。
视觉吸引力较弱：相较于 3D 柱状图，二维柱状图的视觉效果可能较为平淡，对于一些需要突出视觉冲击力的场景可能不够吸引人。

ECharts 3D柱状图的常用配置项

xAxis3D 配置项

xAxis3D 用于配置三维笛卡尔坐标系中的 x 轴，其常用配置项有下面几个：

type：x 轴的类型，对于 3D 柱状图，一般为 ‘category’，表示类目轴。如：‘type’: ‘category’。
data：x 轴的数据，用于定义 x 轴上的各个类目。这个选项是一个数组，数组的每个元素表示一个类目。如：‘data’: [‘类目1’, ‘类目2’, ‘类目3’]。
name：x 轴的名称，用于描述或标识 x 轴的含义。如：‘name’: ‘月份’。
nameTextStyle：x 轴名称的样式设置。可以通过该配置项设置字体颜色、字体大小等样式。如：‘nameTextStyle’: { ‘color’: ‘#333’, ‘fontSize’: 12 }。
axisLine：x 轴轴线相关的设置。可以通过该配置项设置轴线的颜色、粗细等样式。如：‘axisLine’: { ‘lineStyle’: { ‘color’: ‘#999’, ‘width’: 1 } }。
axisLabel：x 轴刻度标签的样式设置。可以通过该配置项设置刻度标签的颜色、字体大小、字体样式等样式。如：‘axisLabel’: { ‘color’: ‘#666’, ‘fontSize’: 10 }。
splitLine：x 轴网格线的设置。可以通过该配置项设置网格线的颜色、线型、显示隐藏等样式。如：‘splitLine’: { ‘show’: true, ‘lineStyle’: { ‘color’: ‘#ccc’, ‘type’: ‘dashed’ } }。
axisTick：x 轴刻度线的设置。可以通过该配置项设置刻度线的长度、粗细等样式。如：‘axisTick’: { ‘show’: true, ‘length’: 5, ‘lineStyle’: { ‘color’: ‘#999’, ‘width’: 1 } }。
min、max：x 轴的最小值和最大值。可以通过 min 和 max 来限制 x 轴的显示范围。如：‘min’: 0, ‘max’: 100。
interval：x 轴类目轴的刻度标签显示间隔。可以通过该选项设置刻度标签的显示频率。如：‘interval’: 2 表示每隔 2 个刻度标签显示一个。
axisPointer：x 轴指示器的样式设置。可以通过该配置项设置指示器的样式。如：‘axisPointer’: { ‘lineStyle’: { ‘color’: ‘#999’, ‘width’: 1 } }。
splitArea：x 轴刻度区域的设置。

yAxis3D 配置项

yAxis3D 用于配置三维笛卡尔坐标系中的 y 轴，其常用配置项有下面几个：

type：y 轴的类型，对于 3D 柱状图，一般为 ‘value’，表示数值轴。如：‘type’: ‘value’。
name：y 轴的名称，用于描述或标识 y 轴的含义。如：‘name’: ‘销量’。
nameTextStyle：y 轴名称的样式设置。可以通过该配置项设置字体颜色、字体大小等样式。如：‘nameTextStyle’: { ‘color’: ‘#333’, ‘fontSize’: 12 }。
axisLine：y 轴轴线相关的设置。可以通过该配置项设置轴线的颜色、粗细等样式。如：‘axisLine’: { ‘lineStyle’: { ‘color’: ‘#999’, ‘width’: 1 } }。
axisLabel：y 轴刻度标签的样式设置。可以通过该配置项设置刻度标签的颜色、字体大小、字体样式等样式。如：‘axisLabel’: { ‘color’: ‘#666’, ‘fontSize’: 10 }。
splitLine：y 轴网格线的设置。可以通过该配置项设置网格线的颜色、线型、显示隐藏等样式。如：‘splitLine’: { ‘show’: true, ‘lineStyle’: { ‘color’: ‘#ccc’, ‘type’: ‘dashed’ } }。
axisTick：y 轴刻度线的设置。可以通过该配置项设置刻度线的长度、粗细等样式。如：‘axisTick’: { ‘show’: true, ‘length’: 5, ‘lineStyle’: { ‘color’: ‘#999’, ‘width’: 1 } }。
min、max：y 轴的最小值和最大值。可以通过 min 和 max 来限制 y 轴的显示范围。如：‘min’: 0, ‘max’: 100。
interval：y 轴刻度标签显示间隔。可以通过该选项设置刻度标签的显示频率。如：‘interval’: 10 表示每隔 10 个刻度标签显示一个。
axisPointer：y 轴指示器的样式设置。可以通过该配置项设置指示器的样式。如：‘axisPointer’: { ‘lineStyle’: { ‘color’: ‘#999’, ‘width’: 1 } }。
splitArea：y 轴刻度区域的设置。可以通过该配置项设置刻度区域的背景色或纹理等样式。

zAxis3D 配置项

zAxis3D 用于配置三维笛卡尔坐标系中的 z 轴，其常用配置项有下面几个：

type：z 轴的类型，对于 3D 柱状图，一般为 ‘value’，表示数值轴。如：‘type’: ‘value’。
name：z 轴的名称，用于描述或标识 z 轴的含义。如：‘name’: ‘高度’。
nameTextStyle：z 轴名称的样式设置。可以通过该配置项设置字体颜色、字体大小等样式。如：‘nameTextStyle’: { ‘color’: ‘#333’, ‘fontSize’: 12 }。
axisLine：z 轴轴线相关的设置。可以通过该配置项设置轴线的颜色、粗细等样式。如：‘axisLine’: { ‘lineStyle’: { ‘color’: ‘#999’, ‘width’: 1 } }。
axisLabel：z 轴刻度标签的样式设置。可以通过该配置项设置刻度标签的颜色、字体大小、字体样式等样式。如：‘axisLabel’: { ‘color’: ‘#666’, ‘fontSize’: 10 }。
splitLine：z 轴网格线的设置。可以通过该配置项设置网格线的颜色、线型、显示隐藏等样式。如：‘splitLine’: { ‘show’: true, ‘lineStyle’: { ‘color’: ‘#ccc’, ‘type’: ‘dashed’ } }。
axisTick：z 轴刻度线的设置。可以通过该配置项设置刻度线的长度、粗细等样式。如：‘axisTick’: { ‘show’: true, ‘length’: 5, ‘lineStyle’: { ‘color’: ‘#999’, ‘width’: 1 } }。
min、max：z 轴的最小值和最大值。可以通过 min 和 max 来限制 z 轴的显示范围。如：‘min’: 0, ‘max’: 100。
interval：z 轴刻度标签显示间隔。可以通过该选项设置刻度标签的显示频率。如：‘interval’: 10 表示每隔 10 个刻度标签显示一个。
axisPointer：z 轴指示器的样式设置。可以通过该配置项设置指示器的样式。如：‘axisPointer’: { ‘lineStyle’: { ‘color’: ‘#999’, ‘width’: 1 } }。

grid3D

grid3D 是 ECharts 中用于配置 3D 柱状图的网格样式和布局的配置项，常用的配置参数如下：

show：是否显示 3D 网格。如果设置为 true，则显示 3D 网格；如果设置为 false，则不显示。如：‘show’: true。
boxWidth、boxHeight、boxDepth：3D 网格所占的空间大小。通过调整 boxWidth、boxHeight 和 boxDepth 可以控制 3D 网格的宽度、高度和深度。如：‘boxWidth’: 200, ‘boxHeight’: 100, ‘boxDepth’: 80。
left、top、right、bottom：3D 网格相对于容器的位置。可以通过调整 left、top、right 和 bottom 来设置 3D 网格相对于容器的位置。如：‘left’: ‘10%’, ‘top’: ‘20%’, ‘right’: ‘10%’, ‘bottom’: ‘20%’。
axisPointer：网格中的轴指示器的样式设置。可以通过该配置项设置轴指示器的样式。如：‘axisPointer’: { ‘lineStyle’: { ‘color’: ‘#999’, ‘width’: 1 } }。
light：3D 网格的光照设置。通过调整 light 的参数，可以设置光源的位置、强度和颜色等属性。如：‘light’: { ‘main’: { ‘intensity’: 1, ‘shadow’: true, ‘shadowQuality’: ‘high’ } }。
environment：3D 网格的环境贴图设置。可以通过 environment 设置网格的环境贴图，改变网格的背景效果。如：‘environment’: ‘none’。
viewControl：3D 视角控制设置。可以通过 viewControl 设置视角的旋转、缩放、自动旋转等功能。如：‘viewControl’: { ‘autoRotate’: true, ‘alpha’: 30, ‘beta’: 10 }。

series 配置

series 用于配置柱状图的系列数据。可以设置柱形的样式、颜色、透明度、标签等。常用的属性有：

type：指定系列的类型为 bar3D 来创建 3D 柱状图。例如：type: 'bar3D'。
data：设置数据系列的具体数据。可以是一个数组，也可以是一个对象数组。

itemStyle：设置柱状图的样式。可以通过 itemStyle 属性来配置柱状图的颜色、透明度、边框等样式。例如：

itemStyle: {
      
      
  color: '#ff0000',
  opacity: 0.8,
  borderWidth: 1,
  borderColor: '#000000'
}

emphasis：设置柱状图的高亮样式。可以通过 emphasis 属性来配置柱状图在高亮状态下的样式。例如：

emphasis: {
      
      
  itemStyle: {
      
      
    color: '#00ff00',
    opacity: 1
  }
}

shading：设置柱状图的着色效果。echarts-gl 中支持下面三种着色方式：
- ‘color’ 只显示颜色，不受光照等其它因素的影响。
- ‘lambert’ 通过经典的 lambert 着色表现光照带来的明暗。
- ‘realistic’ 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了基于物理的渲染（PBR）来表现真实感材质。

Vue3中使用Echats 3D柱状图

创建vue项目，安装ECharts库和echarts-gl库

要使用Echarts提供的3D柱状图，需要安装echarts-gl库

// 安装Echarts
npm install echarts --save
// 安装echarts-gl
npm install echarts-gl

新建Bar3dView.vue文件，使用import语句引入ECharts库和echarts-gl库

import * as echarts from 'echarts'; 
import 'echarts-gl'

创建图表容器：在Bar3dView组件的template中，添加一个div元素作为图表的容器。给它一个唯一的ref属性，以便在后面初始化图表对象时使用

<template>
   <div ref="chart" style="width:600px;height:400px; margin: 20px auto;"></div>
</template>

初始化图表对象：在Bar3dView组件中定义chart，

const chart = ref(null)

在mounted生命周期钩子函数中，使用echarts.init方法初始化图表对象。

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const chart = ref(null)
onMounted(() => {
  const myChart = echarts.init(chart.value) 
})
</script>

5.准备数据，实际项目开发中，这里的数据应该是从后台的API接口获取的，这里我们直接在前端写了，这里我们要展示不同城市的年平均气温数据：

 var data = [
            { city: '北京', temperature: 14 },
            { city: '上海', temperature: 16 },
            { city: '广州', temperature: 23 },
            { city: '深圳', temperature: 25 },
            { city: '重庆', temperature: 18 },
        ];

        // 处理数据，生成对应的x轴和y轴数据
        var xAxisData = [];
        var yAxisData = [];
        data.forEach(function(item) {
            xAxisData.push(item.city);
            yAxisData.push(item.temperature);
        });

配置图表参数，在Bar3dView组件的mounted生命周期钩子函数中，定义option对象，在里面配置图表数据，并使用chart.setOption方法配置图表的参数。

onMounted(() => {
  const myChart = echarts.init(chart.value)
	grid3D: {},
    xAxis3D: {
      type: 'category',
      data: xAxisData,
    },
    yAxis3D: {
      type: 'value',
    },
    zAxis3D: {
      type: 'value',
    },
    series: [{
      type: 'bar3D',
      data: yAxisData.map(function (value, index) {
        return [index, value, 0];
      }),
      shading: 'lambert',
      label: {
        show: true,
        formatter: '{c}°C',
        position: 'inside',
      },
      itemStyle: {
        opacity: 0.8,
      },
    }],
  }
  myChart.setOption(option)
})

配置完成后，运行程序，刷新浏览器，看下效果
在这里插入图片描述
好了，关于Echarts 3D柱状图的相关内容就介绍到这里，有问题的小伙伴可以在评论区留言，喜欢的小伙伴点赞关注加收藏哦！你也可以通过微信公众号搜索“九仞山”关注我，获取更多内容！

极致呈现系列之：ECharts3D柱状图的维度穿梭

目录