先看下效果吧

實現思路

1. 使用graphic創建并注冊自定義圖形。根據每組的數據值，得到一個對應的點，從點出發用canvas繪制一組圖形，分別為
   頂部的菱形
   

   const CubeTop = echarts.graphic.extendShape({buildPath: function (ctx, shape) {const c1 = [shape.x, shape.y]; // 下const c2 = [shape.x + 9, shape.y - 7]; // 右const c3 = [shape.x, shape.y - 12]; // 上const c4 = [shape.x - 9, shape.y - 7]; // 左ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();}
   });
   

   左側的四邊形

   const CubeLeft = echarts.graphic.extendShape({buildPath: function (ctx, shape) {const xAxisPoint = shape.xAxisPoint;const c0 = [shape.x, shape.y]; // 右上const c1 = [shape.x - 9, shape.y - 7]; //左上const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 6]; // 左下const c3 = [xAxisPoint[0], xAxisPoint[1]]; // 右下ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();}
   });
   

   右側的四邊形
   

   const CubeRight = echarts.graphic.extendShape({buildPath: function (ctx, shape) {const xAxisPoint = shape.xAxisPoint;const c1 = [shape.x, shape.y]; // 左上const c2 = [xAxisPoint[0], xAxisPoint[1]]; // 左下const c3 = [xAxisPoint[0] + 9, xAxisPoint[1] - 7]; //右下const c4 = [shape.x + 9, shape.y - 7]; // 右上ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();}
   });
   

2. 用series自定義系列(custom)的renderItem將這一組圖形元素返回，組合形成3D柱狀圖

代碼實現

<template><div id="graphicBar"></div>
</template><script setup>import {reactive, onMounted} from 'vue'import * as echarts from "echarts";const barData = reactive({xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],data: [200, 180, 120, 220, 80, 160, 150]})const customShape = () => {// 創建自定義的shape類型const CubeLeft = echarts.graphic.extendShape({buildPath: function (ctx, shape) {const xAxisPoint = shape.xAxisPoint;const c0 = [shape.x, shape.y]; // 右上const c1 = [shape.x - 9, shape.y - 7]; //左上const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 6]; // 左下const c3 = [xAxisPoint[0], xAxisPoint[1]]; // 右下ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();}});const CubeRight = echarts.graphic.extendShape({buildPath: function (ctx, shape) {const xAxisPoint = shape.xAxisPoint;const c1 = [shape.x, shape.y]; // 左上const c2 = [xAxisPoint[0], xAxisPoint[1]]; // 左下const c3 = [xAxisPoint[0] + 9, xAxisPoint[1] - 7]; //右下const c4 = [shape.x + 9, shape.y - 7]; // 右上ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();}});const CubeTop = echarts.graphic.extendShape({buildPath: function (ctx, shape) {const c1 = [shape.x, shape.y]; // 下const c2 = [shape.x + 9, shape.y - 7]; // 右const c3 = [shape.x, shape.y - 12]; // 上const c4 = [shape.x - 9, shape.y - 7]; // 左ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();}});// 注冊創建的自定義的shape類型echarts.graphic.registerShape('CubeLeft', CubeLeft);echarts.graphic.registerShape('CubeRight', CubeRight);echarts.graphic.registerShape('CubeTop', CubeTop);}const draw_bar = () => {customShape()const option = {xAxis: {data: barData.xAxis,axisLabel: {fontSize: 12,color: '#FFFFFF'},axisLine: {lineStyle: {color: '#3A4547',}},axisTick: {show: false}},yAxis: {type: 'value',axisLabel: {fontSize: 12,color: '#A8B5C1'},splitLine: {lineStyle: {color: ['#303638'],type: 'dashed'}}},grid: {containLabel: true,top: 10,bottom: 0,right: 0,left: 0},series: [        {type: 'custom',renderItem: (params, api) => {// coord 將數據值映射到坐標系上// api.value 給定維度的數據值const location = api.coord([api.value(0), api.value(1)]);return {type: 'group',children: [{type: 'CubeLeft',shape: {api,x: location[0], // 圖形元素的右上角在父節點坐標系中的橫坐標值y: location[1], // 圖形元素的右上角在父節點坐標系中的縱坐標值xAxisPoint: api.coord([api.value(0), 0]) // 圖形元素的右下角在父節點坐標系中的坐標值},style: {// 漸變色填充fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(35, 153, 254, 1)'},{offset: 1,color: 'rgba(70, 207, 255, 1)'},])}},{type: 'CubeRight',shape: {api,x: location[0], // 中間上的xy: location[1], // 中間上的yxAxisPoint: api.coord([api.value(0), 0]) // 中間下},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(32, 147, 255, 1)'},{offset: 1,color: 'rgba(71, 237, 255, 1)'},])}},{type: 'CubeTop',shape: {api,x: location[0],y: location[1],},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(107, 230, 254, 1)'},{offset: 1,color: 'rgba(48, 211, 255, 1)'}])}}]};},data: barData.data}]};return option}const chart_init = () => {let curChart = echarts.init(document.getElementById('graphicBar'))const exampleOption = draw_bar()curChart.setOption(exampleOption);}onMounted(() => {chart_init()})
</script><style scoped>#graphicBar{width: 460px;height: 300px;}
</style>

補充說明

1. 以上內容是vite構建的vue3項目
2. echarts版本5.5.1