如何在前端用js实现画三维饼图

echarts没有三维饼图，但是有时候又需要在前端绘制三维饼图怎么办？这个时候可以考虑用threejs来实现功能。

现在我们来实现图示效果：

如何在前端用js实现画三维饼图

1：首先在项目里引入threejs文件

threejs下载：https://cdn.bootcss.com/three.js/r67/three.js

<script src="js/three.min.js"></script>

2：然后再引入饼图插件Cubic.js

cubicPieChart-1.0.min.js下载地址：https://download.csdn.net/download/tianseyiwan008/11013601

<script type="text/javascript" src="cubicPieChart-1.0.min.js"></script>

3：使用插件的方法

html：

<div id="WebGL-output" style="width: 900px;height:400px;"></div>

js：

var cubic = new Cubic.PieChart("WebGL-output", {
        width: 400,
        height: 300,
        thickness: 5,//厚度
        radius: 30,//半径
        colors: [0xffffff, 0xff00ff, 0xffff00, 0x0000ff,0x5F9EA0,0x00FF7F],//颜色数组16进制的数组
        data: [12, 13, 5, 50, 23, 54],//数据数组
        startAngle: 0,//起始角
        background: 0x00ffff,//背景色，16进制数字
        opacity: 1   //背景透明度
    });

    console.log(cubic.getPosition());
    console.log(cubic.getRotation());
    // cubic.setPosition(0, 20, 0);
    // cubic.setRotation(0, 0, 0);
    // cubic.remove();

大功告成！