vue 自定義組件被同一個頁面多次調(diào)用，數(shù)據(jù)被覆蓋

我自己寫了一個組件，echarts里面的柱狀圖，數(shù)據(jù)與圖表名字是動態(tài)的，
在column.vue中寫了

props:{
    column:{
        text:{
            type:String,
            default:""
        },
        series: [Object],
    },
},
mounted(){
    //省略一部分代碼
    this.myChart.setOption({
        series:this.column.series
    }）
}

之后在charts.vue中調(diào)用

<template>
    <div>
        <v-column :column="column"></v-column>
        <v-column :column="column2"></v-column>
    </div>
</template>

<script>
    import vColumn from '../common/Column.vue';
    export default {
        data() {
            return {
                column:{
                    text:"這個是標(biāo)題",
                    series: [
                        {
                            name: '標(biāo)題1',
                            type: 'bar',
                            barWidth: '60%',
                            data: [10, 52, 200, 334, 390, 330, 220]
                        }
                    ],
                },
                column2:{
                    text:"這個是標(biāo)題2",
                    series: [
                        {
                            name: '標(biāo)題2',
                            type: 'bar',
                            barWidth: '60%',
                            data: [10, 100,20,40,50,120]
                        }
                    ],
                }
            }
        },
        mounted() {},
        methods: {},
        components: {
            vColumn
        }
    }
</script>

但是顯示出來的圖表只有第一個是有數(shù)據(jù)的，而且數(shù)據(jù)是colum2的，請問如果同一個頁面調(diào)用多次相同組件，但是數(shù)據(jù)不同，該怎么做呀，或者說怎么樣局部調(diào)用，避免同頁面中數(shù)據(jù)污染
這是使用第一個v-column

這是使用第二個v-column

回答

編輯回答

艷骨

大概率是echarts init有問題，是不是用class或id選擇器選擇元素來init了
錯誤版本

<template>
    <div id="chart"></div>
</template>
<script>
import * as echarts from 'echarts';
export default{
    mounted(){
        this.myChart=echarts.init(document.getElementById('chart'));
        ...
    }
}
<script>

正確版本

<template>
    <div ref="chart"></div>
</template>
<script>
import * as echarts from 'echarts';
export default{
    mounted(){
        this.myChart=echarts.init(this.$el);//也可以用this.$ref.chart
        ...
    }
}
<script>

2017年3月29日 05:38

編輯回答