博客 / 詳情

返回

[highcharts] 03_從highcharts內向上層傳遞參數

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

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

user avatar tofrankie 頭像 fyuanlove 頭像
2 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.