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

淋着
  • 261

因其他原因,未使用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重复了导致第二个未加载
image.png

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

回复
阅读 800
2 个回答

应该能行:

'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选择器。

尝试下改成如下代码

<chart-map :data="areadata" key="map1"></chart-map>
<chart-map :data="areadata" key="map2"></chart-map>
echarts.init($('#chart-map')[0])

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏