持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

在大家日常的开发工作中肯定会使用到echarts，用它来做各种图表，刚开始都是通过一点一点修改echarts的配置属性，什么grid、series、itemStyle、legend等等，生成基础的series数组中只有一个对象的简单点的图表，有很多甚至是把官网的demo照搬下来改改颜色直接用的。

可是这个办法只能在中午使用，所以重要的还是得提升技术，进阶。

我现在就处于这个阶段开始进阶了，刚好遇到这个问题，所以把自己的经历分享一下。

废话不多说，先来看一下做完是什么样子

效果图

怎么样，看着还不错吧，接下来，我就来讲讲怎么实现的。

实现

别看这个图简单，但是每一个都嵌套了五层。

整体布局样式

隐藏X轴的刻度和刻度线，设置变量名称的位置和颜色
隐藏Y轴的所有线条和文字单位等等
设置整体的布局位置

当然这些你可以根据自己的需求更改。代码如图

第一层

最上面的那个椭圆，type: 'pictorialBar',是象形柱图，官方是这样介绍他的

象形柱图是可以设置各种具象图形元素（如图片、SVG PathData等）的柱状图

{
					type: 'pictorialBar',
					name: 'pictorial element',
					z: 15,
					symbol: 'circle',
					symbolOffset: [0, '-50%'],
					symbolPosition: 'end', //图形边缘与柱子结束的地方内切
					symbolSize: [30, 10], //根据柱子大小来做调整
					color: '#19b8fa',
					label: {
						show: true,
						position: 'top',
						textStyle: {
							color: '#41bcf0',
							fontSize: 12
						}
					},
					data: datalist
				},

第二层

渐变柱状图，这个不需要多说什么吧。

第三层第四层第五层 这几层其实都是象形柱图，只不过放在底部罢了，代码如下

				{
					type: 'pictorialBar',
					name: 'bottom1',
					barGap: '-100%',
					z: 13,
					symbol: 'circle',
					symbolSize: [30, 10],
					symbolOffset: [0, 10],
					symbolRotate: 180,
					itemStyle: {
						color: '#0c9dd9'
					},
					data: datalist
				},
				{
					name: "bottom2",
					type: "pictorialBar",
					barGap: '-100%',
					symbolSize: [35, 13],
					symbolOffset: [0, 18],
					z: 12,
					itemStyle: {
						normal: {
							color: "transparent",
							borderColor: "#0b8cc8",
							borderWidth: 15,
						},
					},
					data: datalist
				},
				{
					name: "bottom3",
					type: "pictorialBar",
					symbolSize: [45, 18],
					symbolOffset: [0, 22],
					z: 11,
					itemStyle: {
						normal: {
							color: "transparent",
							borderColor: "#064267",
							borderWidth: 15,
						},
					},
					data: datalist
				},

其实还是很简单的吧，就这样一个伪3D柱状图就完成了，快自己试试吧

vue3伪3D柱状图

效果图

实现