最近在做大數(shù)據(jù)管理系統(tǒng)用到了Highcharts器予,其中需要獲取后臺(tái)數(shù)據(jù)動(dòng)態(tài)渲染呈現(xiàn)出來(lái)穴张,讓數(shù)據(jù)可視化更簡(jiǎn)單停撞。
其實(shí)在Highcharts中文網(wǎng)上有相應(yīng)的演示
https://www.hcharts.cn/demo/highcharts/line-ajax
但是我這次做的是比較多挣惰,使用官網(wǎng)的相對(duì)應(yīng)的演示,那開(kāi)發(fā)量將會(huì)大大的增加挥等,做的過(guò)程還是引用了?Vuejs大大減少了工作量粥惧,為了紀(jì)念匕积,把過(guò)程記錄一下:
首先橡卤,是引入HIghcharts繪圖相關(guān)的js文件和jQuery.js以及vue.min.js扮念。
接著定義oChart的布局環(huán)境
使用VUEJS動(dòng)態(tài)獲取數(shù)據(jù)
源碼地址:https://github.com/cinoliu/Highcharts-vuejs