Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.9k views
in Technique[技术] by (71.8m points)

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

因其他原因,未使用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])
应该是这导致的,但是不知道如何调整


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

应该能行:

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...