关于前端:highcharts-03从highcharts内向上层传递参数

37次阅读

共计 603 个字符,预计需要花费 2 分钟才能阅读完成。

形容:
要求点击 highcharts 中的某个元素,如下图中的蓝色 bubble,点击蓝色 bubble 将“汇添富翻新将来 18 个月”这个参数传递到父元素中,父元素中有一个表格展现所点击的 bubble 对应基金的详情。
这就要求在点击事件产生时,把参数传递到上一层。

上面以跳转为例,阐明如何传递参数
(跳转:传递基金的参数,父元素解决,跳转到指定基金的页面)

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

jumpFundDetail 接管参数,负责跳转的具体逻辑。
exportData 就是一个函数,接管 highcharts 点击事件向上传递的参数。

上面是重点
在 vue 的 computed 属性中定义一个 customizedOptions 函数,在这个函数中将 exportData 引入。customizedOptions 返回一个对象,这个对象中定义了 click 事件,在 click 事件中通过 exportData 函数,将参数传递到 highcharts 的下层。

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

最初
stockOptions.plotOptions = this.customizedOptions

同步更新到本人的语雀
https://www.yuque.com/diracke…

正文完
 0