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

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

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

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

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

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

    最后
    stockOptions.plotOptions = this.customizedOptions