基於highcharts封裝的組件－demo&源碼

前段時間做的項目中需要用到highcharts繪制各種圖表，其實繪制圖表本身代碼很簡單，但是由於需求很多，有大量的圖形需要繪制，所以就不得不復制粘貼大量重復（默認配置等等）的代碼，所以，后來抽空自己基於highcharts封裝了一個插件。組件暴露一個Hxt的全局對象，它有以下一些方法來繪制不同類的圖形，從此以后，畫圖只需簡簡單單的幾行配置就ok了！趕緊點進來看看實例吧！

Hxt.line(elem, data, options);         //渲染默認折線圖
Hxt.spline(elem, data, options);         //曲線圖
Hxt.scatter(elem, data, options);         //散點圖
Hxt.bubble(elem, data, options);         //bubble圖
Hxt.column(elem, data, options);         //柱狀圖
Hxt.bar(elem, data, options);         //bar圖，（橫向柱狀圖）
Hxt.area(elem, data, options);         //區域圖（默認為平滑區域圖）
Hxt.pie(elem, data, options);         //圓餅圖
Hxt.polar(elem, data, options);         //雷達圖
Hxt.pyramid(elem, data, options);         //金字塔圖
Hxt.mix(elem, data, options);         //混合圖

怎么樣？很簡潔吧？什么？你說：沒有demo你說個毛線？？？

好吧，由於博客園不好自定義頁面，所以我把demo放到了自己的網站了，你可以點這里看demo

這個頁面有三個具有代表性的圖形（條形圖，圓形，混合圖），但是缺點呢？demo圖形不全面，並且沒有demo對應的代碼。如果你不能接受！那么你可以選擇下面這個方案！

查看github項目倉庫

這就是封裝的插件的倉庫地址，讀者們如果有這個需求，可以直接用！，步驟如下：

• 直接clone代碼到本地

  git clone https://github.com/luckykun/highextend.git
  

• 到項目目錄下，執行命令npm install安裝依賴包

  npm install
  

• 然后執行gulp就可以看到所有demo了。

  gulp
  

這里的demo中心一應具全，而且能夠看到每個demo的對應的代碼。有需求的讀者們，趕快行動起來吧！！如果大家覺得還有用的話，幫我star一下啦～～～多謝多謝！

下面是本地運行的效果圖：