Laravel5.8+vue 使用echarts 饼图动态获取接口返回数据

Laravel5.8+vue 使用echarts 饼图动态获取接口返回数据

使用echarts在我上一篇文章Laravel5.8+vue 使用echarts

话不多说直接上代码吧

<script>
    //初始化一个空数组方便存放给饼图的数据
    var servicedata=[];
    export default {
        name: "Home",
        data() {
            return {
                myChart: '',
            }
        },
        methods: {
            //请求list接口
            list() {
                let url = "head/headSchool-list";
                this.axios.get(url).then(response => {
                    var Data = response.data.data;
                    console.log(Data);
                    //装入接口返回的数据
                    for (var i = 0; i < Data.length; i++) {
                        var obj=new Object();
                        obj.name=Data[i].name;
                        //我这里的value 用的是随机的id值,这里根据需要设置值
                        obj.value=Data[i].id;
                        servicedata[i]=obj;
                    }
                    console.log(servicedata)
                    //设置饼图
                    this.myChart.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 10,
                            data: servicedata
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                //放入饼图需要的{name：xx,value:xx}方式的数据组
                                data: servicedata
                            }
                        ]
                    });
                }).catch(function (error) {
                    console.log(error);
                });
            },
        mounted() {
            // 基于准备好的dom，初始化echarts实例
            this.myChart = this.$echarts.init(document.getElementById("main1"))
            this.list();
        }
    }
</script>

这是我接口返回的数据

控制器方面直接返回需要的数据

 $SchoolData = School::query()->paginate(13);  //这里的分页可以不用
 return $SchoolData;

效果如下