[highcharts] 03_从highcharts内向上层传递参数

描述:
要求点击highcharts中的某个元素,如下图中的蓝色bubble,点击蓝色bubble将“汇添富创新未来18个月”这个参数传递到父元素中,父元素中有一个表格展示所点击的bubble对应基金的详情。
这就要求在点击事件发生时,把参数传递到上一层。
[highcharts] 03_从highcharts内向上层传递参数_第1张图片

下面以跳转为例,说明如何传递参数
(跳转:传递基金的参数,父元素处理,跳转到指定基金的页面)

我们在vue的methods里定义两个方法,一个是jumpFundDetail,另一个是exportData。

jumpFundDetail接收参数,负责跳转的具体逻辑。
exportData就是一个函数,接收highcharts点击事件向上传递的参数。
[highcharts] 03_从highcharts内向上层传递参数_第2张图片

下面是重点
在vue的computed属性中定义一个 customizedOptions函数,在这个函数中将exportData引入。customizedOptions返回一个对象,这个对象中定义了click事件,在click事件中通过exportData函数,将参数传递到highcharts的上层。
[highcharts] 03_从highcharts内向上层传递参数_第3张图片

注意代码中的两个this指向。
绿色框框的this指向vue实例。
蓝色框框的this指向点击事件点击的highcharts 绘制出的元素。

最后
stockOptions.plotOptions = this.customizedOptions

同步更新到自己的语雀
https://www.yuque.com/diracke...

你可能感兴趣的:([highcharts] 03_从highcharts内向上层传递参数)