vue中 怎么把echarts中data的數據循環

1.。后台返回的數據格式是下圖這樣的，然后取name和commonCount

 

2.把這個數組遍歷一下，把要取的name和commonCount放到兩個空數組里

 

這樣就取到了

export default {
    name: 'ranking',
    data(){
        return {
        }
    },
    methods:{
        // 工作質態--警情排名
        queryRanking() {
          let this_ = this;
          this_.$post("這里面放接口", {}).then(res => {
            if (res.code == 200) {
                 //遍歷數組，取出數據
                var rankName=[],commonCount=[]
                for(var i=0;i<res.data.length;i++){
                    rankName.push(res.data[i].name);
                    commonCount.push(res.data[i].commonCount);
                }
                 this_.getEchart(rankName,commonCount);
            } else {
                this_.getEchart([], [], [],[]);
                this_.$message("無結果");
            }
          });
        },

        getEchart(rankName,commonCount){
            var rankingChart = echarts.init(document.getElementById('rankEchart'));
            var option = {
                title : {
                    text: '警情排名',
                    left:'7%',
                    top:'-1%',
                    textStyle:{
                        //文字顏色
                        color:'#00eeff',
                        //字體大小
                　　　　 fontSize:19,
                         fontWeight:'normal',
                    }
                },

                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐標軸指示器，坐標軸觸發有效
                        type: 'shadow' // 默認為直線，可選為：'line' | 'shadow'
                    }
                },
                grid: {
                    top: '12%',
                    left: '10%',
                    right: '15%',
                    bottom: '0',
                    containLabel: true
                },
                yAxis: [{
                    type: 'category',
                    data: rankName ,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#00eeff'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color:'#ccc',
                        fontSize:15
                    },
                }],
                xAxis: [{
                    show: false,
                    type: 'value'
                }],
                series: [{
                    name: '總計',
                    type: 'bar',
                    barWidth: '18%',
                    // barCategoryGap:10,            
                    data: commonCount,
                    itemStyle: {
                        normal: {
                            color: '#00eeff' ,
                            label: {
                                show: true, //開啟顯示
                                position: ['220px','-1px'], //在上方顯示
                                textStyle: { //數值樣式
                                          color: '#00eeff',
                                    fontSize: 15
                                }
                            }
                        }
                    },
                }]
            };
            // 為echarts對象加載數據 
            rankingChart.setOption(option);
        }

    },
    mounted() {
        // this.getEchart();
        this.queryRanking();
    }

}