vue前端控件控制Echart表格内容

添加前端控件，来调控Echart表格显示的内容。结构如下:

 

大型控件：

    和echart表格一样同属于index的子组件。当大型控件的值被改变时，$emit触发index的方法，修改index中的变量值。echart表格通过props监听index的指定变量，当监听到变量改变时触发新的组装任务，向后端接口发送请求和新的控件数据，接收返回值并重新渲染echart表格。这样大型控件就成功完成了对兄弟组件的传值。

小型控件：

    写在index下，当小型控件的值被改变时，直接修改对应的变量值。具体实现见：Vue 输入框调用methods中的函数_Endless ad的博客-CSDN博客

Echart对Index变量进行props监听：

首先在echart.vue声明进行props监听的变量：

    props: {
        sampleString: {
            type: String
        },
        sampleNumber: {
            type: Number
        }
    }

Index调用echart时声明哪些变量对应echart的props变量，注意命名法，声明前要有冒号:

<e-chart :sample-string="indexSampleString" :sample-number="indexSampleNumber" />

echart进行props监听：

watch: {
    sampleString: {
        deep: true,
        handler(val){
            this.echartSetOptionSample(val, this.sampleNumber)
        }
    },
    sampleNumber: {
        deep: true,
        handler(val){
            this.echartSetOptionSample(this.sampleString, val)
        }
    }
}