#插件讨论# 【 echarts - 陌上华年 】 业务场景 之 一个页面实现多个echart的经验分享

业务场景：一个页面实现单类型且多个（动态）echart的情况

关键点就是：v-for循环里每个组件都是一个数组，如果不打印$refs就不容易发现。

直接上单页面实现同类型多个Echart图表的完整代码

<template>  
    <view style="height: 750rpx">  
        <!-- 模式1 -->  
        <!-- <l-echart customStyle="width: 100%; height:600rpx" ref="chart_result0"></l-echart>  
        <l-echart customStyle="width: 100%; height:600rpx" ref="chart_result1"></l-echart> -->  

        <!-- 模式2 -->  
        <view class="charts-box" v-for="(item,chartIndex) in chartDataList" :index="chartIndex">  
            <l-echart customStyle="width: 100%; height:600rpx" :ref="`chart_result${chartIndex}`"></l-echart>  
        </view>  

        <button @click="todoChartPage">模拟请求并初始化</button>  
    </view>  
</template>  

<script>  
    import echarts from '@/common/echarts.js';  
    import lEchart from '../../../uni_modules/lime-echart/components/l-echart/l-echart.vue';  
    export default {  
        components: {  
            lEchart  
        },  
        data() {  
            return {  
                chartDataList: [{  
                        xAxis: {  
                            type: 'category',  
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  
                        },  
                        yAxis: {  
                            type: 'value'  
                        },  
                        series: [{  
                            data: [150, 230, 224, 218, 135, 147, 260],  
                            type: 'line'  
                        }]  
                    }, {  
                        xAxis: {  
                            type: 'category',  
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  
                        },  
                        yAxis: {  
                            type: 'value'  
                        },  
                        series: [{  
                            data: [150, 230, 99, 33, 135, 147, 99],  
                            type: 'line'  
                        }]  
                    }  
                    // Add more chart data objects as needed  
                ]  
            };  
        },  
        mounted() {  
            this.todoChartPage();  
        },  
        methods: {  
            todoChartPage() {  
                this.chartDataList.forEach((item, index) => {  
                    this.$nextTick(() => {  
                        setTimeout(() => {  
                            this.$refs[`chart_result${index}`][0].init(echarts, chart => {  
                                chart.setOption(item);  
                            });  
                        }, 600);  
                    })  
                })  
            }  
        }  
    };  
</script>  

<style lang="less">  
    .charts-box {  
        width: 100%;  
        height: 300px;  
    }  
</style>