效果：
code：
1 <html> 2 <style> 3 div{ 4 width: 500px; 5 height: 500px; 6 background-color: white; 7 } 8 </style> 9 <body> 10 <div id="dd"></div> 11 </body> 12 13 </html> 14 <script src="./incubator-echarts-4.7.0/dist/echarts.js"></script> 15 <script> 16 var MyCubeRect = echarts.graphic.extendShape({ 17 shape: { 18 x: 0, 19 y: 0, 20 48, //柱宽 21 zWidth: 8, //阴影折角宽 22 zHeight: 4, //阴影折角高 23 }, 24 buildPath: function (ctx, shape) { 25 const api = shape.api; 26 const xAxisPoint = api.coord([shape.xValue, 0]); 27 const p0 = [shape.x, shape.y]; 28 const p1 = [shape.x - shape.width / 2, shape.y]; 29 const p4 = [shape.x + shape.width / 2, shape.y]; 30 const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]]; 31 const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]]; 32 33 ctx.moveTo(p0[0], p0[1]); //0 34 ctx.lineTo(p1[0], p1[1]); //1 35 ctx.lineTo(p2[0], p2[1]); //2 36 ctx.lineTo(p3[0], p3[1]); //3 37 ctx.lineTo(p4[0], p4[1]); //4 38 ctx.lineTo(p0[0], p0[1]); //0 39 ctx.closePath(); 40 } 41 }); 42 var MyCubeShadow = echarts.graphic.extendShape({ 43 shape: { 44 x: 0, 45 y: 0, 46 48, 47 zWidth: 8, 48 zHeight: 4, 49 }, 50 buildPath: function (ctx, shape) { 51 const api = shape.api; 52 const xAxisPoint = api.coord([shape.xValue, 0]); 53 const p0 = [shape.x, shape.y]; 54 const p1 = [shape.x - shape.width / 2, shape.y]; 55 const p4 = [shape.x + shape.width / 2, shape.y]; 56 const p6 = [shape.x + shape.width / 2 + shape.zWidth, shape.y - shape.zHeight]; 57 const p7 = [shape.x - shape.width / 2 + shape.zWidth, shape.y - shape.zHeight]; 58 const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]]; 59 const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1] - shape.zHeight]; 60 61 ctx.moveTo(p4[0], p4[1]); //4 62 ctx.lineTo(p3[0], p3[1]); //3 63 ctx.lineTo(p5[0], p5[1]); //5 64 ctx.lineTo(p6[0], p6[1]); //6 65 ctx.lineTo(p4[0], p4[1]); //4 66 67 ctx.moveTo(p4[0], p4[1]); //4 68 ctx.lineTo(p6[0], p6[1]); //6 69 ctx.lineTo(p7[0], p7[1]); //7 70 ctx.lineTo(p1[0], p1[1]); //1 71 ctx.lineTo(p4[0], p4[1]); //4 72 ctx.closePath(); 73 } 74 }); 75 echarts.graphic.registerShape('MyCubeRect', MyCubeRect); 76 echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow); 77 78 var myChart = echarts.init(document.getElementById('dd')); 79 80 var option = { 81 grid: { 82 height: 300 83 }, 84 xAxis: { 85 data: ['one', 'two'] 86 }, 87 yAxis: { 88 type: 'value' 89 }, 90 series: [{ 91 type: 'custom', 92 renderItem: function (params, api) { 93 let location = api.coord([api.value(0), api.value(1)]); 94 return { 95 type: 'group', 96 children: [{ 97 type: 'MyCubeRect', 98 shape: { 99 api, 100 xValue: api.value(0), 101 yValue: api.value(1), 102 x: location[0], 103 y: location[1] 104 }, 105 style: { 106 fill: '#5AD8A6' 107 } 108 }, { 109 type: 'MyCubeShadow', 110 shape: { 111 api, 112 xValue: api.value(0), 113 yValue: api.value(1), 114 x: location[0], 115 y: location[1] 116 }, 117 style: { 118 fill: '#2DCF8E' 119 } 120 }] 121 }; 122 }, 123 data: [20, 60] 124 }] 125 }; 126 127 myChart.setOption(option); 128 </script>
注意：4.7.0这个版本的echarts.js可以出这个效果，老版本不一定可以