遍历生成多个echarts（遍历echarts）

<template>
    <!-- //地区分布 -->
    <div>
        <ul style="width: 100%">
            <template v-for="(item, index) in chartList_values">
                <li :id="forId(index)" style="height: 225px" :key="index"></li>
            </template>
        </ul>
    </div>
</template>


<script>
//引入基本模板
import echarts from 'echarts';
function compare(property) {
    return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    };
}
export default {
    data() {
        return {
            chartList: [], //
            getId: [], //用来生成echarts
            chartList_values: [], //取其值
            chartList_Key: [] //没用到
        };
    },
    mounted() {},
    methods: {
        forId(index) {
            return 'geo_' + index;
        },
        show(option) {
            console.log(option.level_incite_user_list, '每个等级的占比情况11');
            this.chartList = option.level_incite_user_list;
            this.mapTree();
        },
        mapTree() {
            this.getId = [];
            this.chartList_values = Object.values(this.chartList);
            this.chartList_Key = Object.keys(this.chartList);
            console.log(this.chartList_values, 'this.chartList_values');
            console.log(this.chartList_Key, 'this.chartList_Key');
            this.$nextTick(function () {
                for (var i = 0; i < this.chartList_values.length; i++) {
                    let arr = [];
                    this.chartList_values[i].datum.forEach((item) => {
                        arr.push({
                            value: item.user_coun,
                            name: item.score_level
                        });
                    });
                    console.log(arr, 'arr========');
                    //拿到channel_grade_name作为变量key
                    this.getId.push(echarts.init(document.getElementById('geo_' + i)));
                    console.log(this.getId, 'this.getId');
                    console.log(this.chartList_values[i], ' this.chartList[i]');
                    this.getId[i].setOption({
                        title: {
                            text: this.chartList_values[i].channel_name,
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: this.temp
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                // {value: this.dataVal[i].normalSum, name: ''}
                                data: arr,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                }
            });
        }
    }
};
</script>



<style scoped>
ul {
    display: flex;
    flex-wrap: wrap;
}
li {
    list-style-type: none;
    width: 33%;
}
</style>