3d圆饼图
3D圆饼图,可修改颜色,图片等,具体见代码:

组件代码:
<template>
<!-- 饼图 -->
<div :id="histogramId" v-bind:style="{height:height,width:width}"></div>
</template>
<script src="https://unpkg.com/echarts-gl@2/dist/echarts-gl.min.js"></script>
<script type="text/ecmascript-6">
export default {
props:{
//id
histogramId:{
type:String,
default:''
},
//组件的高度
height: {
type: String,
default: '160px'
},
//组件的宽度
width: {
type: String,
default: '500px'
},
//legend 样式
legend:{
type:Object,
default:()=>{
return{
legendIcon:'rect', //circle,rect ,roundRect,triangle,diamond,pin,arrow,none
legendWidth:10,
legendHeight:10,
legendGrap:20,
bottom:'0%',
top:'5%',
right:'0%',
color:'#ffffff',
fontSize:12,
legendShow:false
}
}
},
graphic:{
type:Array,
default:()=>[
{threeDiImg:'http://218.56.180.213:8029/static/file/pic/202305/picFgwCEgfJ1684914835410.png',imgWidth:220, imgHeight:98,threeDiLeft:'20%',threeDiTop:'35%'},
{threeDiImg:'http://218.56.180.213:8029/static/file/pic/202305/picu4HDaEi21684914867656.png',imgWidth:185, imgHeight:77,threeDiLeft:'24%',threeDiTop:'31%'}
]
},
grid3D:{
type:Object,
default:()=>{
return{
threeTop:'-15%',
threeLeft:'-7%',
threeDistance:170,
radius:0.59, //之前默认0.59
alpha:30,
autoRotateSpeed:30,
height:40
}
}
},
imgGridData: {
type: Array,
default: () => [
{name: '开放式', value: 10}, {name: '封闭式', value: 20}, {name: '混合式', value: 30},{name: '其他', value: 30}
]
},
colors:
