基于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一下啦～～～多谢多谢！

下面是本地运行的效果图：