Echarts柱状图中文网：https://echarts.apache.org/examples/zh/index.html#chart-type-bar

效果展示：

主要实现过程是三部分的组合，最上面是一个椭圆，中间是正常的柱子，下方再加上一个椭圆，就出来立体的效果。

分别展示三段组合代码：

1. 顶部的椭圆形(象形柱图):pictorialBar

      {type: "pictorialBar", // pictorialBar(象形柱图)symbolSize: [20, 5], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]symbolOffset: [0, 3], // 图形相对于原本位置的偏移z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#17A8A0",},{offset: 1,color: "#5AEA80",},]),},data: columnData.value,},

2. 中间的柱子:bar

      {name: "发电量",type: "bar",barWidth: 20,itemStyle: {color: {x: 0,y: 0,x2: 0,y2: 1,type: "linear",global: false,colorStops: [{offset: 0,color: "#17A8A0",},{offset: 1,color: "#5AEA80",},],},},data: columnData.value,label: {show: true,position: "top",color: "#FFFFFF",fontSize: 14,},},

3. 底部的椭圆形(象形柱图):pictorialBar

     {type: "pictorialBar",symbolSize: [20, 10],symbolOffset: [0, -5],z: 12,symbolPosition: "end",itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#17A8A0",},{offset: 1,color: "#5AEA80",},]),},data: columnData.value,},

整体代码如下：

<template><divid="stereoscopicChart"style="width: 100%; height: 270px"></div>
</template><script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
// 横坐标data数据
const xData = ref(["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",
]);
// 柱状data数据
const columnData = ref([394, 194, 287, 189, 139, 420, 385, 239, 279, 379, 277, 237,
]);let myStereoscopicChart: echarts.ECharts | null = null;
const showStereoscopicEcharts = () => {if (!myStereoscopicChart) {const stereoscopicChartDom = document.getElementById("stereoscopicChart");myStereoscopicChart = echarts.init(stereoscopicChartDom);}const stereoscopicOption = {tooltip: {trigger: "axis",formatter: "{b}<br/> 发电量   {c}kWh",type: "line",axisPointer: {lineStyle: {color: "#17A8A0",},},backgroundColor: "rgba(7,18,26, 1)",borderWidth: 0,textStyle: {color: "#fff",fontSize: 14,align: "left",},},// 图例legend: {show: false,},// 图表位置grid: {left: "5%",right: "5%",top: "18%",bottom: "0%",containLabel: true,},xAxis: [{type: "category",axisLine: {lineStyle: {color: "#415264",width: 1,type: "solid",},},axisLabel: {color: "rgba(255,255,255,0.6)",fontSize: 12,},axisTick: {show: false,},data: xData.value,},],yAxis: [{name: "发电量（kWh）",type: "value",axisTick: {show: false,},axisLine: {lineStyle: {color: "rgba(255,255,255,0.2)",},},axisLabel: {color: "rgba(255,255,255,0.2)",fontSize: 12,},splitLine: {lineStyle: {color: "rgba(255,255,255,0.2)",type: "dashed",},},},],series: [// 底部的椭圆形(象形柱图):pictorialBar{type: "pictorialBar", // pictorialBar(象形柱图)symbolSize: [20, 5], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]symbolOffset: [0, 3], // 图形相对于原本位置的偏移z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#17A8A0",},{offset: 1,color: "#5AEA80",},]),},data: columnData.value,},{name: "发电量",type: "bar",barWidth: 20,itemStyle: {color: {x: 0,y: 0,x2: 0,y2: 1,type: "linear",global: false,colorStops: [{offset: 0,color: "#17A8A0",},{offset: 1,color: "#5AEA80",},],},},data: columnData.value,label: {show: true,position: "top",color: "#FFFFFF",fontSize: 14,},},{type: "pictorialBar",symbolSize: [20, 10],symbolOffset: [0, -5],z: 12,symbolPosition: "end",itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#17A8A0",},{offset: 1,color: "#5AEA80",},]),},data: columnData.value,},],};stereoscopicOption && myStereoscopicChart.setOption(stereoscopicOption);
};
const resizeChart = () => {if (myStereoscopicChart) {myStereoscopicChart.resize();}
};
onMounted(() => {showStereoscopicEcharts();window.addEventListener("resize", resizeChart);
});
</script>

🌻 Everyday is a second chance.