当前位置: 首页 > Web前端 > HTML

[highcharts]03_highcharts向上层传递参数

时间:2023-03-28 11:23:18 HTML

说明:需要点击highcharts中的一个元素,如下图蓝色气泡,点击蓝色气泡更改参数“中国通用创新在thenext18months”传递给父元素,父元素中有一个表格显示点击的气泡对应的基金明细。这就需要在点击事件发生时向上层传递参数。下面以跳转为例说明如何传递参数(跳转:传递基金参数,父元素处理,跳转到指定基金的页面)。我们在vue的方法中定义了两个方法,一个是jumpFundDetail,一个是exportData。jumpFundDetail接收参数,负责跳转的具体逻辑。exportData是一个函数,接收highcharts点击事件传过来的参数。下面重点在vue的computed属性中定义一个customizedOptions函数,并在该函数中导入exportData。customizedOptions返回一个对象,该对象定义了点击事件,并通过点击事件中的exportData函数将参数传递给highcharts上层。注意代码中的两个this指针。绿色框内的this指向vue实例。蓝色框内的this指向点击事件点击的highcharts绘制的元素。最后,stockOptions.plotOptions=this.customizedOptions同步更新到自己的语雀https://www.yuque.com/diracke...