1.如果是多个图表,那就创建一个公共组件(子组件),如下:
<template>
//自定义弹窗
<el-dialog
top="150px"
width="60%"
:modal="true"
:title="title"
append-to-body
:visible.sync="dialogVisible"
:modal-append-to-body="false"
:close-on-click-modal="false">
<div id="dialogBox"></div>
</el-dialog>
</template>
<script>
export default {
data () {
return {
dialogVisible: false,
title: ''
}
},
methods: {
show(title, val, id) {
// title:弹出框 标题说明
// val: 父组件中 echart的option数据
// id: 自定义 id
this.dialogVisible = true
this.title = title
this.$nextTick(() => {
let divBox = document.getElementById('dialogBox')
if (divBox.children && divBox.children.length == 1) {
divBox.removeChild(divBox.children[0])
}
let divChild = document.createElement('div')
divChild.setAttribute('id', id)
divBox.