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();
大功告成!