以下代码有问题请直接问国内直连GPT/Claude
HTML
需要注意threeDchart一定要设置宽度高度，不然图不显示,然后echarts版本不要太低，不然也不显示

<div id="threeDchart" class="threeDchart"></div>

js

     set3DBarChart2(data) {var myChart = echarts.init(document.getElementById('middle-right-top-chart'));data = [2000, 1529, 2251, 1173];const CubeLeft = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {const xAxisPoint = shape.xAxisPoint;const c0 = [shape.x, shape.y];const c1 = [shape.x - 9, shape.y - 9];const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9];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({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {const xAxisPoint = shape.xAxisPoint;const c1 = [shape.x, shape.y];const c2 = [xAxisPoint[0], xAxisPoint[1]];const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9];const c4 = [shape.x + 18, shape.y - 9];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({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {const c1 = [shape.x, shape.y];const c2 = [shape.x + 18, shape.y - 9];const c3 = [shape.x + 9, shape.y - 18];const c4 = [shape.x - 9, shape.y - 9];ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();},});echarts.graphic.registerShape('CubeLeft', CubeLeft);echarts.graphic.registerShape('CubeRight', CubeRight);echarts.graphic.registerShape('CubeTop', CubeTop);let  option = {grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true,},tooltip: {trigger: 'item',formatter: (params) => {let markerArr = params.marker.split('color:');let marker = markerArr[0] + 'color:#1472FF;"></span>';dataStr =`<div style="color:#000A3A"><div style="color:#666666">${params.name}</div><div>` +marker +`<span>合同金额</span>` +`<span style="margin-left:15px">${params.data}万元</span></div>` +`</div>`;return dataStr;},},xAxis: {type: 'category',data: ['隆德矿业', '榆横煤电', '锦兴能源', '不连沟'],axisTick: {show: false, // 不显示坐标轴刻度线},axisPoint: {type: 'shadow',},axisLabel: {textStyle: {color: '#666666',fontSize: '14',},},},yAxis: [{type: 'value',min: 0,name: '万元',splitLine: {show: true,lineStyle: {color: '#F0F0F0',},},nameTextStyle: {color: '#666666',padding: [0, 30, 0, 0],},axisLabel: {color: '#666666',},},// 右侧纵向坐标轴{type: 'value',name: '折线图值',position: 'right', // 右侧显示splitLine: {show: false, // 不显示右侧坐标轴的分隔线},axisLabel: {color: '#FF7F50',},nameTextStyle: {color: '#FF7F50',},}],series: [// 3D柱状图{type: 'custom',renderItem: function (params, api) {const location = api.coord([api.value(0), api.value(1)]);return {type: 'group',children: [{type: 'CubeLeft',shape: {api,xValue: api.value(0),yValue: api.value(1),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: '#1D6CE2',},{offset: 1,color: 'rgba(51, 135, 234, 0.10)',},]),},},{type: 'CubeRight',shape: {api,xValue: api.value(0),yValue: api.value(1),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(51, 124, 234, 1)',},{offset: 0.3,color: 'rgba(51, 124, 234, 0.97)',},{offset: 0.7,color: 'rgba(51, 135, 234, 0.36)',},{offset: 1,color: 'rgba(51, 143, 234, 0.10)',},]),},},{type: 'CubeTop',shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: '#1472FF',},},],};},data: data,},// 折线图{type: 'line',name: '折线图',smooth: true, // 平滑曲线data: [2000, 1800, 2300, 1500], // 你可以根据实际数据修改这个数组lineStyle: {color: '#FF7F50',width: 3,},symbol: 'circle', // 设置折线图标记为圆形symbolSize: 8, // 设置圆形标记的大小yAxisIndex: 1, // 使用右侧的 y 轴},],};myChart.setOption(option);window.addEventListener('resize', function () {myChart.resize();});},