描述:
要求點擊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...