vue中复用echarts

问题：同一页面下复用同一个echarts组件，会发生覆盖，然后只渲染了一个echarts出来。

答：echarts使用id来初始化组件，故要复用的话，id要动态传入子组件。

子组件

<div class="Echarts">
    <div :id="barChartId" style="width: 100%;height: 400px"></div>
</div>

<script>
props: {
    barChartId: {
        type: String,
        default: "main"
    }   
}


var myChart = echarts.init(document.getElementById(that.barChartId));
</script>

父组件

    <bar-chart :bar-chart-id="barChartId1" :ctext="ctext1" :cdata="cdata1" style="background-color: #fff"></bar-chart>