BigScreenUI/src/components/echartsCom/Pie3dCom.vue

<template>
    <div id="container" style="height: 100%;height: 100%;"></div>
</template>
<script setup lang="ts">
import Highcharts from "highcharts"
import highcharts3d from 'highcharts/highcharts-3d'
const props = defineProps({
    list:{
        type:Array,
        default:[]
    }
})
onMounted(() => {
    console.log("props-list",props.list)
    Highcharts.chart('container', options)
})

const options:any = {
    chart: {
        type: 'pie',
        backgroundColor: 'rgba(0, 0, 0, 0.32)',
        options3d: {
            enabled: true,
            alpha: 45
        },
        spacingTop: 20,
        spacingBottom: 20,
        spacingLeft: 17,
        spacingRight: 17,
    },
    title: {
        text: '施工单位自有设备详情',
        margin: 50,
        style: {
            color: "#66E0FF",
        },
        align: 'left',
        x: 0,
        y: 23
    },
    plotOptions: {
        pie: {
            innerSize: 60,
            depth: 45,
            showInLegend: true,
            dataLabels: {
                enabled: false,
            }
        }
    },
    legend: {
        itemStyle: {
            color: '#f0f0f0',
        },
        itemHoverStyle: {
            color: '#66E0FF',
        },
        itemHiddenStyle: {
            color: '#999',
        },
    },
    series: [{
        name: '设备数量',
        data:props.list
    }],
    accessibility:{
        enabled: false
    },
    credits: {
        enabled: false
    },
}


</script>
<style scoped lang="scss"></style>