echarts实现3D柱状图（视觉层面）和3D饼图

1.3D柱状图

原理：

立体图形从一个方向只能看到三个面，于是我们通过echarts图表实现 顶部，明面，和暗面。

效果图如下：

需要四份数据，两个柱子的数据+X轴数据+颜色数据，

通过setData和setColor生成需要的数据，横向柱状图同理，参照代码中注释。

以下是完整案例代码：

	
		
		
	
	
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.border {
			border: 1px solid #000;
		}

		.left {
			width: 25%;
			height: 100%;
			margin: 0 auto;
		}		
	
	
		
			
		
	
	
	

 2.3D饼图

3D饼图没有标签，实现方式是将2d饼图，旋转一定角度覆盖于3D表面，如果有好的方法，欢迎评论区留下链接

注意：需要引入与echarts版本对应的echarts-gl

效果图如下：

完整代码实例：（根据需要自行调整）

    
    
    
    
    
    



    
        
    
    
    
        .container {
            width: 560px;
            height: 164px;
            background-color: #000000;
            position: relative;
        }

        .imgContent {
            width: 164px;
            height: 86px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 5;
        }
    

更多参数配置，前往echarts官网查询，传送门