Vue解决Echarts组件使用ID不能复用问题

项目中封装了echart组件，想重复使用echart图表。项目开始使用id进行echart图表初始化，发现多次调用同一个组件出现id重复，导致组件只能使用一次得问题。

解决方法：

将id改为ref即可。

示例：

原始组件代码：

<template>
    <div
        id="lineChart"
        class="chartContainer"
    />
</template>
<script>
export default {
    name: 'LineChart',
    components: {
    },
    data() {
        return {
        };
    },
    methods: {
       
        initChart(data) {
            const myChart = this.$echarts.init(document.getElementById('lineChart'));
        },
};
</script>

修改后代码：

<template>
    <div
        ref="lineChart"
        class="chartContainer"
    />
</template>
<script>
export default {
    name: 'LineChart',
    components: {
    },
    data() {
        return {
        };
    },
    methods: {
       
        initChart(data) {
            const myChart = this.$echarts.init(this.$refs.lineChart);
        },
};
</script>

使用ref即可复用组件。

记录一下。