vue-两个折线图联动显示，点击上面的下面的联动显示

功能简介：

1、今天是2019.6.8，默认显示前一周数据 2019.6.1-2019.6.7

2、上面折线图和下面折线图均显示最后一天2019.6.7，且高亮

3、上面折线图按日期展示，下面折线图按24小时展示

4、点击上面折线图，日期变蓝色，下面折线图日期联动且日期变蓝色

效果图如下：

关键难点：

0、上面折线图方法this.getEchartByDay(this.echartData.yesterday)；下面折线图方法 this.getEchartByHour(this.echartData.yesterday)

1、点击上面折线图时，要想实现日期变色，需要重新渲染图表

2、在点击事件中把日期传递给下面的折线图，下面折线图从后端重新获取数据，进行渲染

3、点击事件，必须解除绑定，否则会多次调用后端

            // 点击事件
            this.myDayChart.off('click');//解除绑定事件，否者会多次加载
            this.myDayChart.on('click', (params)=> {
                // 分析：点击时，
                // 1、日期图表需要绘制面板，主要是高亮显示点击日期，seriesArea不发生变化，监听方法不会触发，可以直接调用getEchartByDay方法进行渲染
                // 2、24h图表需要重新加载，seriesArea2可能发生变化，发生变化，则 触发监听方法
                
                //把日期和类型(记录点击的是哪个echart表，默认从父组件传参，值一开始就设定好)传递给父组件，
                this.$emit('getDayForHours',params.name,this.echartData.typecode) 
                this.getEchartByDay(params.name);
            }); 

4、监听事件

        // 注意：seriesArea、seriesArea2是从ajax中获取的数据，需要监听数据变化时，调用方法，防止数据还没传过来
        seriesArea(newVal) {
            // 监听图表1数据变化
            this.$nextTick(() => {
                this.getEchartByDay(this.echartData.yesterday);
            })
        },
        seriesArea2(newVal) {
            // 监听图表2数据变化
            this.$nextTick(() => {
                this.getEchartByHour(this.echartData.yesterday);
            })
        },