html

<echartitem></echartitem>

js

<script>
    Vue.component('echartitem', {
        props: ['echartitem'],
        template: '<div class="echart4" ref="echartt"></div>',
        mounted: function () {
            window.addEventListener('resize', this.getHeight)
            this.getHeight();
        },
        methods: {
            getHeight() {
                this.drawecharts();
            },
            drawecharts() {
                var that=this;
                var option = {
                    color: ['rgba(30, 125, 205, 1)', 'rgba(0, 234, 237, 1)'],
                    series: [
                        {
                            name: '中间环形',
                            type: 'pie',
                            //圆，半径，值1内圆，值2外圆
                            radius: ['80%', '100%'],
                            //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
                            center: ['50%', '50%'],
                            avoidLabelOverlap: false,
                            hoverAnimation: false,
                            //数据标签
                            label: {
                                show: false,
                                position: 'center',
                                textStyle: {
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    color: 'rgba(0, 234, 237, 1)'
                                },
                                formatter: '{b}\n{c}%',
                                // 针对 center 参数校正标签显示位置
                                lineHeight: 3
                            },
                            data: [{
                                value: 92.73,
                                name: '',
                                label: {
                                    normal: {
                                        show: true
                                    }
                                }
                            },
                                {
                                    value: 100 - 92.73,
                                    name: ''
                                }
                            ]
                        }
                    ]
                };
                var chart = echarts.init(that.$refs.echartt);
                chart.clear();
                chart.resize();
                chart.setOption(
                    option
                );
            },
        }
    });
var vm = new Vue({
        el: "#home",
        data: {
           
        },
        mounted: function () {
            
        },
        computed: {},
        methods: {},
    })
</script>