Highcharts 是一款用純JavaScript編寫的一個圖表庫，使用非常簡單。而且官網提供了大量的示例，這些示例可以直接複製到自己的程式碼中，只需要按自己的業務要求繫結資料即可。

和其他圖表控制元件比較，Highcharts是經過多年的開發和維護擁有著豐富的圖表功能，有穩定的效能以及專業詳細的開發文件，上手極其容易，而且圖表展現出來也是非常的美觀簡約。另外HighCharts還有很好的相容性，能夠完美支援當前大多數瀏覽器（ie6以上）。對圖例的配置，主題等擴充套件性也比較好。

提供了豐富的圖表

還有豐富的示例

使用時，先下載，解壓，在HighCharts資料夾，目錄結構如下：

1、highcharts.js是主要的js檔案

2、themes是樣式資料夾，目前有八種樣式風格。

3、modules資料夾下主要包含多種資源包，如匯出功能模組，金字塔圖表型別模組，鑽取功能模組，資料載入功能模組等資源包。

4、adapters下有mootools和prototype介面卡，

應用：

以下是一個使用vue做柱狀圖例子。

1）引用

HighCharts是基於Jquery框架開發的，所以需要在頁面引入Jquery，然後引入Highcharts（注意引用順序）

  <scriptsrc="/highcharts/highcharts.js"></script> 

在vue中使用import Highcharts from 'highcharts';

如果使用匯出功能，必須引入匯出相關的js檔案，該檔案在/Highcharts/js/modules/目錄下

<scriptsrc="http://code.highcharts.com/modules/exporting.js"></script>

2）程式碼

首先頁面繫結控制元件

<template>

  <h2 class="chart-title"style="display: none;">逾期情況分析</h2>

    <md-layout>

      <md-chart class="myChart"ref="myChart" :options="options":auto-resize="autoResize"></md-chart>

</md-layout>

</template>

然後對控制元件進行配置

var defaultOpts={

  chart: {

        type: 'bar',

        className:'mana-chart',

        marginTop:0,

        marginLeft:20,

    },

    colors:['#de3030','#f55e1c','#f59c1f','#ffd112',  '#9ed93d','#6bb526','#05a14a','#05c9cc','#12a3d4','#5973ed','#384fdb','#570f73','#781f6e','#8c1ca3','#f21291'],

    title: {text: ''},

    xAxis: {visible:false},

    yAxis: {

        title:{text:''},

        className:'mana-chart-yaxis',

    },

    tooltip:{enabled:false },

    plotOptions: {

        bar: {

            groupPadding:0.15,

            pointWidth:30,

            dataLabels: {

                enabled: true,

               className:'mana-chart-data-labels',

                style:{textOutline:null},

                 y:6,

                formatter:function(c){

                    return this.point.name+'，'+this.y;

                }

            }

        }

    },

    legend:{enabled:false},

    series: [{

      colorByPoint: true,

      data: [

        {name:'',y:0}

      ]

    }]

};

最後繫結資料

updateOption(reponsedata){

        var datas=[];

        var categories=[];

        var getdatas= _.filter(reponsedata,function(data) {

            return data.tag==0;

          });

          getdatas=_.orderBy(getdatas,'abNum','desc');

         this._.each(getdatas,(value,key)=>{

            categories.push(value.abName);

            datas.push({name:value.abName,y:value.totalm});

          });

          var opts={

                     series: [{data: datas}]

                   };

        this.$refs.myChart&&this.$refs.myChart.mergeOption(opts);

      }

程式碼非常簡單

執行效果