父子组件弹窗，并且将其移植到echart图表中，设置缩放按钮。

由于项目的echarts图表较小，所以考虑打算在echarts的toolbox里面添加一个缩放按钮，点击按钮，将echarts图表放大。

---

---

前言

思路拆解：我先完成了父子组件的弹窗设置，用的dialog弹窗。完成这一项之后，将toolbox的点击触发事件改为父子组件的弹窗事件，由此便完成了点击缩放按钮实现echarts图表的缩放。

---

一、父子组件的弹窗设置。

效果如下：

1.父组件

代码如下：index.vue

<template>
    <div>
        <templateDialog
            :dialog-visible="dialogVisible"
            :data="data"
            @close-dialog="closeDialog"
            @handle-cancel="handleCancel"
            @handle-confirm="handleConfirm"
        ></templateDialog>
        <div>{{childData}}</div>
        <el-button type="primary" @click="dialogVisible = true">
            <i class="el-icon-plus el-icon--left" />
            打开弹窗
        </el-button>
    </div>
</template>

<script>
import templateDialog from './templateDialog.vue'
export default {
    components: {
        templateDialog,
    },
    data() {
        return {
            dialogVisible: false,
            data: '父组件过来的值',
            childData: '',
        }
    },
    methods: {
        closeDialog() {
            this.dialogVisible = false
        },
        handleCancel() {
            this.dialogVisible = false
        },
        handleConfirm(val) {
            console.log('子组件传过来的值：', val)
            this.childData = val
            this.dialogVisible = false
        },
    },
}
</script>

1.子组件

代码如下：templateDialog.vue

<template>
    <div>
        <el-dialog
            width="60%"
            title="模板名称"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
        >
            <div>{{data}}</div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="handleCancel">取 消</el-button>
                <el-button type="primary" size="mini" @click="handleConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'templateDialog',
    props: {
        dialogVisible: {
            type: Boolean,
            default: false,
        },
        data: {
            type: String,
            default: '',
        },
    },
    data() {
        return {}
    },
    created() {
        console.log('asaskj')
    },
    methods: {
        handleClose() {
            this.$emit('close-dialog')
        },
        handleCancel() {
            this.$emit('handle-cancel')
        },
        handleConfirm() {
            let val = '我是子组件'
            this.$emit('handle-confirm', val)
        },
    },
}
</script>

<style scoped>
</style>

子组件的名字为dialogVisible，父组件中可以通过设置dialogVisible为true和false来设置弹窗，当dialogVisible为false是不弹窗，为true时弹窗。
传值是单向的。
父组件向子组件传值：return里面的data为要传的值。需要在templateDialog中添加 ：data=‘data’，这样才能开始往子组件传值。子组件的值要在props:里添加，props里面是父组件传过来的值。
子组件向父组件传值： handleConfirm在这个里面，这个具体没有去看，现在只用到父组件向子组件传值

二、echarts的toolbox添加自定义按钮

代码如下：

myTool1: {
    show: true,
    title: self.isFull == true ? '取消全屏' : '全屏',
    icon:
        'path://M641.750109 384.100028l205.227128-204.519-0.704035 115.89966c-0.282433 9.611915 7.489578 18.09103 17.101493 17.808598l12.297071 0c9.611915-0.283456 17.667382-5.936199 17.808598-15.689331l0.565888-172.57752c0-0.14224 0.282433-9.187243 0.282433-9.187243 0.14224-4.804423-0.99056-9.187243-4.100388-12.297071-3.109828-3.109828-7.347339-5.086855-12.297071-4.946662l-8.763594 0.14224c-0.141216 0-0.278339 0-0.420579 0.14224L697.581696 98.166787c-9.611915 0.283456-17.667382 8.200776-17.808598 17.950837l0 12.297071c1.416256 11.44875 10.458189 18.092054 20.070104 17.808598l112.789832 0.283456-204.66124 203.814965c-9.329483 9.329483-9.329483 24.449855 0 33.778314 9.329483 9.470699 24.452925 9.470699 33.782408 0L641.750109 384.100028zM383.095141 576.889893 177.726797 780.705881l0.707105-115.338888c0.283456-9.607822-7.492648-18.086937-17.104563-17.808598l-13.001105 0c-9.611915 0.283456-17.667382 5.937223-17.808598 15.690354l-0.565888 172.718737c0 0.14224-0.282433 9.187243-0.282433 9.187243-0.14224 4.808516 0.99056 9.187243 4.096295 12.297071 3.109828 3.109828 7.351432 5.086855 12.297071 4.946662l8.762571-0.14224c0.14224 0 0.283456 0 0.425695-0.14224l171.873486 0.708128c9.607822-0.283456 17.667382-8.196683 17.808598-17.950837L344.93503 832.575226c-1.415232-11.44875-10.461259-18.092054-20.074198-17.808598L212.069977 814.483172 416.59 610.671277c9.329483-9.329483 9.329483-24.453948 0-33.782408C407.40685 567.41817 392.424624 567.41817 383.095141 576.889893L383.095141 576.889893zM894.047276 835.967486l-0.424672-172.718737c-0.283456-9.612938-8.200776-15.406898-17.809621-15.690354l-12.296047 0c-9.612938-0.278339-17.243733 8.200776-17.105586 17.808598l0.708128 115.903753L641.750109 576.889893c-9.329483-9.329483-24.452925-9.329483-33.782408 0-9.325389 9.328459-9.325389 24.452925 0 33.782408L812.490795 814.483172l-112.789832 0.283456c-9.611915-0.283456-18.515702 6.502088-20.073174 17.808598l0 12.297071c0.282433 9.611915 8.200776 17.667382 17.808598 17.950837l171.166381-0.708128c0.141216 0 0.282433 0.14224 0.424672 0.14224l8.763594 0.14224c4.803399 0.141216 9.187243-1.694595 12.296047-4.946662 3.109828-3.109828 4.238534-7.488555 4.097318-12.297071 0 0-0.14224-9.046027-0.14224-9.187243L894.047276 835.968509zM212.216309 146.506748l112.789832-0.283456c9.607822 0.283456 18.512632-6.502088 20.070104-17.808598L345.076246 116.116601c-0.283456-9.611915-8.196683-17.667382-17.808598-17.950837l-172.011632 0.708128c-0.14224 0-0.283456-0.14224-0.425695-0.14224l-8.761548-0.14224c-4.808516-0.141216-9.187243 1.694595-12.297071 4.946662-3.109828 3.109828-4.242627 7.488555-4.096295 12.297071 0 0 0.282433 9.046027 0.282433 9.187243l0.420579 172.718737c0.14224 9.608845 8.200776 15.406898 17.808598 15.686261l13.005198 0c9.611915 0.282433 17.242709-8.196683 17.10047-17.808598l-0.564865-115.334795 205.231221 203.958228c9.324366 9.329483 24.448832 9.329483 33.777291 0 9.329483-9.329483 9.329483-24.452925 0-33.782408L212.216309 146.506748 212.216309 146.506748zM212.216309 146.506748',
    onclick: function(){
      that.dialogVisible = true
      
    },

此代码放在toolbox里的feature里面
其中icon:中的path是图标的形状，可以采用本地图片，绝对路径
也可以用矢量路径，推荐用这个。
onclick这个是他的点击触发函数。为了能让他在echarts中点击缩放按钮，实现弹窗，这里的点击触发我改为了父子组件的弹窗里面的dialogVisible= true。此处注意：onclick里面的this与vue全局里面的this是有冲突的，所以要在echarts 的opion里面对this进行重新赋值。
矢量路径
1、在https://www.iconfont.cn/上查找想要使用的图标
2、选择复制SVG

复制结果

3、取SVG的path d部分，拼接在**path://**即可

var that = this

2.动态数据监控

由于项目的echarts是动态的，所以当数据变化的时候，需要重新绘制图表，因此需要添加watch

代码如下：

watch:{

        yyy(curVal, oldVal) {
      if (curVal) {
      // this.waterData 
        this.yyy = curVal;
        console.log('子页面',this.yyy);
        // 传递的数据处理
         
         this.data11.push(this.yyy);
    
        console.log('子页面1',this.data11);
        this.$nextTick(() => {
        // 调用methods里写好的方法
          this.open();
        });
      }
    },

    }
  

其实这一块，我没有去把值进行重新赋值，只是让图表能重新进行绘制。因为图表绘制和数据他不是同时的，也就是说，父组件往子组件是一直传值的，（必须是在点击弹窗后才是一直传值。），点击缩放按钮只显示一条数据。此处我只是让他监听数据变化，然后调用open进行重新绘制图表。
open是什么？这个看我上篇文章，主要是解决了第一次进入弹窗，不绘制图表的问题。

---

本人小白，如果有不对的地方，请指明。