关于vue echart组件id重复不加载的问题？

Question

因其他原因，未使用vue-cli等其他脚手架（也不能使用）进行开发，但是需要使用vue组件
目前采用下面这种方法开发echart组件

<script type="text/x-template" id='component-map'>
    <div class="flex-box" style="height:100%;width:100%;padding: 10px;">
        <div id="chart-map" class="flex1"></div>
    </div>
</script>

el: '#test',
components: {
    'chart-map': {
        template: '#component-map',
        props: ['data'],
        data() {
            return {
                test: 'sdafsafasdfasfasfa------->',
            }
        },
        mounted(){
            this.$nextTick(()=>{
                this.initMap()
            })
        },
        methods: {
            initMap(){
                const chart = echarts.init($('#chart-map')[0])

                ...
            }
        },
    },

但是在渲染组件的时候，只会加载第一个

<chart-map :data="areadata"></chart-map>
<chart-map :data="areadata"></chart-map>

发现原因：id重复了导致第二个未加载

const chart = echarts.init($('#chart-map')[0])
应该是这导致的，但是不知道如何调整

Answer 1

应该能行：

'chart-map': {
    template: `<div
            ref="map"
            class="flex-box"
            style="height:100%;width:100%;padding: 10px;"
        >
        </div>`,
    props: ['data'],
    data() {
        return {
            test: 'sdafsafasdfasfasfa------->',
        }
    },
    mounted(){
        this.$nextTick(()=>{
            this.initMap()
        })
    },
    methods: {
        initMap(){
            const { map } = this.$refs;
            const chart = echarts.init(map);
        }
    },
},

这样改的指导思想是：在用框架开发的项目中，要进行 DOM 操作的时候，首选框架提供的方法，而不是直接调 DOM 接口或者用 jQuery选择器。

Answer 2

尝试下改成如下代码

<chart-map :data="areadata" key="map1"></chart-map>
<chart-map :data="areadata" key="map2"></chart-map>

echarts.init($('#chart-map')[0])

改成以 class 的方式去获取 dom 别用 id
或者改用插槽