diagnosis.admin/src/components/Echarts.vue

<template>
    <div class="echarts-body">
        <div :id='ids[0]' :style="{width: '130px', height: '130px'}"></div>
        <div :id="ids[1]" :style="{width: '130px', height: '130px'}"></div>
        <div :id="ids[2]" :style="{width: '130px', height: '130px'}"></div>
        <div class="icon">
            <img src="../assets/cruise-ship-blue.png" alt="" v-if="ids[0]=='myCharts'">
            <img src="../assets/original-blue.png" alt="" v-else>

        </div>
    </div>
</template>
<script>
    export default {
        props: {
            icon: {
                type: String,
                default: '../assets/cruise-ship-blue.png'
            },
            ids: {
                type: Array,
                default: () => {
                    return ['myCharts', 'myCharts2', 'myCharts3']
                }
            },
            nums: {
                type: Object,
                default: () => {
                    return {
                        allcount: 11,
                        idlecount: 0,
                        repaircount: 0,
                        runcount: 11
                    }
                }
            }
        },
        created() {
            setTimeout(() => {
                this.drawLine('#52E686', this.ids[0], '90%', '100%', this.nums.runcount, this.nums
                    .allcount) // 运行中
                this.drawLine('#6CACFC', this.ids[1], '70%', '80%', this.nums.repaircount, this.nums
                    .allcount) // 维修中
                this.drawLine('#FA9DF2', this.ids[2], '50%', '60%', this.nums.idlecount, this.nums
                    .allcount) // 空闲中
            }, 500)
            // this.drawLine()
        },
        methods: {
            drawLine(lineColor, id, x, y, num, totaNum) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById(id))
                // 绘制图表
                myChart.setOption({


                    legend: {
                        orient: 'vertical',
                        left: 10,
                        data: ['直接访问', '邮件营销']
                    },
                    series: [{
                        name: '邮轮',
                        type: 'pie',
                        radius: [x, y],
                        hoverAnimation: false,
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [{
                                value: num,
                            },
                            {
                                value: totaNum - num,
                            },
                        ]
                    }]
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .echarts-body {
        position: relative;
        height: 100%;

        div {
            position: absolute;
        }

        .icon {
            width: 35px;
            height: 35px;
            // background: cadetblue;
            top: 47px;
            left: 49px;

            img {
                width: 35px;
                height: 35px;
            }
        }

    }
</style>