为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

corner_sun 2018-08-08 19:30:58
这样的坐标是2d的,图型是3d的统计图用的是用的那种插件,希望大神能提供个思路,我知道的echarts和highcharts、chart.js好像做不出来(或者给柱子上个背景?)
查看完整描述

4 回答

?
温迪me

TA贡献2条经验 获得超4个赞

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]
    }]
};

//img2.sycdn.imooc.com/5e5dfaaf0001114509010783.jpg

//img2.sycdn.imooc.com/5e5dfac80001735805420378.jpg



查看完整回答
2 反对 回复 2020-03-03
?
温迪me

TA贡献2条经验 获得超4个赞

// 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]                
 }
]};

展示效果:

//img1.sycdn.imooc.com/5e5deee50001a5b108430600.jpg

//img1.sycdn.imooc.com/5e5dee8400019b8e05280372.jpg

查看完整回答
2 反对 回复 2020-03-03
?
Nyears

TA贡献35条经验 获得超10个赞

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

查看完整回答
反对 回复 2018-08-15
?
慕容6357965

TA贡献1条经验 获得超0个赞

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

查看完整回答
反对 回复 2019-03-12
点击展开后面1
  • 4 回答
  • 0 关注
  • 9505 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信