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);
      }
代码非常简单
运行效果

版权声明：本文为CSDN博主「ppp80」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接：ttps://blog.csdn.net/ppp80/article/details/80854206