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.