本文主要是介绍如何在前端用js实现画三维饼图和三维柱形图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
echarts没有三维饼图，但是有时候又需要在前端绘制三维饼图怎么办？这个时候可以考虑用threejs来实现功能。
现在我们来实现图示效果：
1：首先在项目里引入threejs文件
threejs下载：用88以上版本https://download.csdn.net/download/tianseyiwan008/11983732
<script src="js/three.min.js"></script>2：然后再引入饼图插件Cubic.js
cubic-1.1.min.js下载地址：https://download.csdn.net/download/tianseyiwan008/11022386
<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, //背景透明度camera: "perspective" //相机类型，透视投影摄像机('perspective)、正交投影摄像机('orthographic')});console.log(cubic.getPosition());console.log(cubic.getRotation());// cubic.setPosition(0, 20, 0);// cubic.setRotation(0, 0, 0);// cubic.remove();//三维柱形图var cubic = new Cubic.CylinderChart("WebGL-output", {width: 400,height: 300,thickness: 60,//厚度radius: 15,//半径rate: 0.4,//百分比background: 0x00ffff,//背景色，16进制数字opacity: 1, //背景透明度topColor: 0x555555,//上部颜色bottomColor: 0xCC0000,//下部颜色topOpacity: 0.5,//上部透明度bottomOpacity: 1,//下部透明度camera: "orthographic" //相机类型，透视投影摄像机('perspective)、正交投影摄像机('orthographic')});// cubic.remove();大功告成！
这篇关于如何在前端用js实现画三维饼图和三维柱形图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
