大数据展示，关于立体的柱状图，效果实现，

Question

这样的坐标是2d的，图型是3d的统计图用的是用的那种插件，希望大神能提供个思路，我知道的echarts和highcharts、chart.js好像做不出来（或者给柱子上个背景？）

Answer 1

custom组合型：

var MyCubeRect = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
        width: 48, //柱宽        
        zWidth: 8, //阴影折角宽        
        zHeight: 4, //阴影折角高 
    },
    buildPath: function (ctx, shape) {
        const api = shape.api;
        const xAxisPoint = api.coord([shape.xValue, 0]);
        const p0 = [shape.x, shape.y];
        const p1 = [shape.x - 24, shape.y];
        const p4 = [shape.x + 24, shape.y];
        const p2 = [xAxisPoint[0] - 24, xAxisPoint[1]];
        const p3 = [xAxisPoint[0] + 24, xAxisPoint[1]];
        
        ctx.moveTo(p0[0], p0[1]); //0
        ctx.lineTo(p1[0], p1[1]); //1
        ctx.lineTo(p2[0], p2[1]); //2
        ctx.lineTo(p3[0], p3[1]); //3
        ctx.lineTo(p4[0], p4[1]); //4
        ctx.lineTo(p0[0], p0[1]); //0
        ctx.closePath();
    }
});
var MyCubeShadow = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
        width: 48,
        zWidth: 8,
        zHeight: 4,
    },
    buildPath: function (ctx, shape) {
        const api = shape.api;
        const xAxisPoint = api.coord([shape.xValue, 0]);
        const p0 = [shape.x, shape.y];
        const p1 = [shape.x - 24, shape.y];
        const p4 = [shape.x + 24, shape.y];
        const p6 = [shape.x + 24 + 8, shape.y - 4];
        const p7 = [shape.x - 24 + 8, shape.y - 4];
        const p3 = [xAxisPoint[0] + 24, xAxisPoint[1]];
        const p5 = [xAxisPoint[0] + 24 + 8, xAxisPoint[1] - 4];
     
        ctx.moveTo(p4[0], p4[1]); //4
        ctx.lineTo(p3[0], p3[1]); //3
        ctx.lineTo(p5[0], p5[1]); //5
        ctx.lineTo(p6[0], p6[1]); //6
        ctx.lineTo(p4[0], p4[1]); //4
     
        ctx.moveTo(p4[0], p4[1]); //4
        ctx.lineTo(p6[0], p6[1]); //6
        ctx.lineTo(p7[0], p7[1]); //7
        ctx.lineTo(p1[0], p1[1]); //1
        ctx.lineTo(p4[0], p4[1]); //4
        ctx.closePath();
    }
});
echarts.graphic.registerShape('MyCubeRect', MyCubeRect);
echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow);
option = {
    grid: {
        height: 300
    },
    xAxis: {
        data: ['one', 'two']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'custom',
        renderItem: function (params, api) {
            let location = api.coord([api.value(0), api.value(1)]);
            return {
                type: 'group',
                children: [{
                    type: 'MyCubeRect',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1]
                    },
                    style: {
                        fill: '#5AD8A6'
                    }
                },{
                    type: 'MyCubeShadow',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1]
                    },
                    style: {
                        fill: '#2DCF8E'
                    }
                }]
            };
        },
        data: [20, 60]
    }]
};

Answer 2

// custom
var MyCube = echarts.graphic.extendShape({    
shape: {        
x: 0,        
y: 0,        
width: 48, //柱宽        
zWidth: 8, //阴影折角宽        
zHeight: 4, //阴影折角高    
},    
buildPath: function (ctx, shape) {        
 const api = shape.api;        
 const xAxisPoint = api.coord([shape.xValue, 0]);        
 const p0 = [shape.x, shape.y];        
 const p1 = [shape.x - 24, shape.y];        
 const p4 = [shape.x + 24, shape.y];        
 const p6 = [shape.x + 24 + 8, shape.y - 4];        
 const p7 = [shape.x - 24 + 8, shape.y - 4];        
 const p2 = [xAxisPoint[0] - 24, xAxisPoint[1]];        
 const p3 = [xAxisPoint[0] + 24, xAxisPoint[1]];        
 const p5 = [xAxisPoint[0] + 24 + 8, xAxisPoint[1] - 4]; 
               
 ctx.moveTo(p0[0], p0[1]); //0        
 ctx.lineTo(p1[0], p1[1]); //1        
 ctx.lineTo(p2[0], p2[1]); //2        
 ctx.lineTo(p3[0], p3[1]); //3        
 ctx.lineTo(p4[0], p4[1]); //4        
 ctx.lineTo(p0[0], p0[1]); //0        
 ctx.moveTo(p4[0], p4[1]); //4        
 ctx.lineTo(p3[0], p3[1]); //3        
 ctx.lineTo(p5[0], p5[1]); //5        
 ctx.lineTo(p6[0], p6[1]); //6        
 ctx.lineTo(p4[0], p4[1]); //4        
 ctx.moveTo(p4[0], p4[1]); //4        
 ctx.lineTo(p6[0], p6[1]); //6        
 ctx.lineTo(p7[0], p7[1]); //7        
 ctx.lineTo(p1[0], p1[1]); //1        
 ctx.lineTo(p4[0], p4[1]); //4        
 ctx.closePath();;    }});
 echarts.graphic.registerShape('myCubeShape', MyCube);
 option = {    
 grid: {        
   height: 300    
 },    
 xAxis: {        
   data: ['one', 'two']   
 },    
 yAxis: {        
   type: 'value'    
 },    
 series: [{                    
   type: 'custom',                    
   renderItem: function (params, api) {                 
    let location = api.coord([api.value(0), api.value(1)]); 
        return {                            
          type: 'myCubeShape',                   
         shape: { 
           api,                                
           xValue: api.value(0), 
           yValue: api.value(1),    
           x: location[0],        
           y: location[1]            
    
              },                            
            style: {                                
            fill: '#5AD8A6'                            
            }                        
         };                    
   },                    
  data: [20, 60]                
 }
]};

展示效果：

Answer 3

个人觉得可以用html画图结合css3 2d+3d;当然不排除有更好的插件，只是本人没用过

Answer 4

我和你做的是一样的图，我用的是echarts