echarts toolbox工具栏设置自定义feature属性设置弹窗和全屏放大

最新推荐文章于 2024-06-06 13:20:02 发布

ゞ腰间盘ゞ

最新推荐文章于 2024-06-06 13:20:02 发布

阅读量4k

点赞数 1

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_48642226/article/details/122171055

版权

在这里插入图片描述

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.