boss_app/components/echarts/pie.vue

<template>
<div class="charts-box" ref="eChart" id="main"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        //图表数据
        chartData: {
            type: Array,
            default: () => {},
        },
    },
    data() {
        return {};
    },
    watch:{
        chartData(newVal, oldVal){
          console.log(newVal, oldVal);
          this.init()
        }
    },
    mounted() {
      console.log(this.chartData);
      this.init()
    },
    methods: {
        init() {
            var chartDom = this.$refs.eChart
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'axis',
                    triggerOn: 'click',
                    axisPointer: {
                        // Use axis to trigger tooltip
                        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                    },
                },
                legend: {
                    bottom: '0%',
                    left: 'center'
                },
                series: [{
                    name: '',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: this.chartData
                }]
            };

            option && myChart.setOption(option);
        }
    },
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
    width: 100%;
    height: 400px;
}
</style>