功能简介:
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);
})
},