Highcharts介绍及vue示例

 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);

      }

代码非常简单

运行效果