ibms/src/components/echarts/doughnut.vue

<template>
    <div style="width:100%;height:100%;" :id="id">
    </div>
</template>
<script>
    import echarts from "echarts"
    export default {
        name: "doughnut",
        props: {
            id: {
                type: String,
                default: function createRandomId() {
                    return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
                }
            },
            renderData: {
                type: Array,
                default: function() {
                    return []
                }
            },
            type: {},
            name: "",
            sum: ""
        },
        data() {
            return {
                myCharts: null
            }
        },
        created() {},
        mounted() {
            this.drawDoughnut()
        },
        methods: {
            drawDoughnut() {
                console.log(this.renderData, "renderData")
                let options = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b}: ({d}%)"
                    },
                    legend: {
                        show: this.type != 'left' ? true : false,
                        orient: 'vertical',
                        right: 10,
                        top: 30,
                        bottom: 20,
                        data: this.renderData.map(item => {
                            return item.name
                        })
                    },
                    series: [{
                        name: '',
                        type: 'pie',
                        radius: ['40%', '60%'],
                        center: this.type != 'left' ? ['90px','70px'] : ['150px', '150px'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: this.type != 'left' ? false : true,
                                    textStyle: {
                                        color: '#3c4858',
                                        fontSize: "12"
                                    },
                                    formatter: function(val) { //让series 中的文字进行换行
                                        return val.name.split("-")[0];
                                    }
                                },
                                title: {
                                    text: 'aaaa'
                                },
                                labelLine: {
                                    show: this.type != 'left' ? false : true,
                                    lineStyle: {
                                        // color: '#3c4858'
                                    }
                                }
                            },
                            emphasis: {
                                shadowBlur: 5,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                                textColor: '#000'
                            }
                        },
                        data: this.renderData
                    }],
                    color: ['#9DA2D6', '#FBACA1', '#FFE37F']
                }
                // if(this.type == 'type'){
                    options.graphic = {
                        type: 'text',
                        left: this.type != 'left' ? '70px' : '125px',
                        top: this.type != 'left' ? '65px' : '145px',
                        style: {
                            text: `总数:${this.sum|| ''}`,
                            textAlign: 'center',
                            fill: '#000',
                            width: 30,
                            height: 30
                        }
                    }
                // }
                this.myCharts = echarts.init(document.getElementById(this.id))
                this.myCharts.setOption(options)
            },
            delName(val){
                if(!!val && val.length > 3){
                    return val.substring(0,3) + '...'
                }else{
                    return ''
                }
            }
        },
        watch: {
            renderData: {
                deep: true,
                handler: function() {
                    this.drawDoughnut()
                }
            }
        }
    }
</script>
<style>

</style>