基本概念

vue-chartjs：vue-chartjs is a wrapper for in vue. You can easily create reuseable chart components.

Chart.js：Chart.js 是一套简单、干净并且有吸引力的基于 HTML5技术的 JavaScript图表工具。Chart.js为你提供了完整的易于集成到你的网站的生动、交互的图表。

官网地址

GitHub

DEMO

API

vue-chartjs的API参考Chart.js的API：

注：vue-chartjs官方的文档只介绍了如何创建和使用插件部分，详细的属性配置还是需要去chart.js的文档里面找。

npm

npm install vue-chartjs chart.js --save

组件

图表组件：Bar:柱状图 HorizontalBar:水平条形图Doughnut:圆环图 Line:折线图Pie:饼图 PolarArea:极地区域图Radar:雷达图/蛛网图 Bubble:气泡分布图Scatter:散点图其他组件：mixinsgenerateChert

示例组件

import {Line} from 'vue-chartjs'export default {  extends: Line,//要引入的图形 (bar是饼状图)  props:["data","options"],//可以在以组件传参的形式定义data,和options配置  //创建图形必须要在mounted函数里，  mounted:function(){    //是在配置线形图的渐变效果    this.gradient = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450);    this.gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)')    this.gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)');    this.gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');    this.renderChart({ //图形初始化函数        labels:[], //表示x轴的配置 如日期 ['1', '2', '3', '4', '5', '6','7',"8","9","10","11","12","13","14","15"],        datasets:[ //是个数组 表示线性走势及对走势线的配置          {            label: '0.38', //小标题的显示            backgroundColor: this.gradient,//线性图 的渐变颜色            data: [3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.8],//数据走势            pointBackgroundColor: 'blue',//x轴 Y轴对应圆点的颜色            pointBorderColor: 'white',//x轴 Y轴对应圆点的圆点border的颜色            fontSize:0,//字体的大小            radius:"0"//圆点的半径          }        ],      }, //相当于data配置      {        responsive: true, // 长宽，100%.如果要单设长和宽的话，要将responsive 设为false        maintainAspectRatio: false, // 保持长宽比        events: ['null'],//对事件的反应，null是对任何事件都无反应的设置，默认为["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]        layout: {//线形图 位置          padding: {            left: 0,            right:0,            top: 0,            bottom: 0            }        },        legend:{ // title下面的 小标题 和 小图的配置          display:true, //是显示          position:"top",//显示的位置          fullWidth:"true", //标记此框应占据画布的整个宽度（按下其他框）。这在日常使用中不太可能需要改变          onClick:function(){},//点击时的回调          onHover:function(){}, //在标签项上注册“mousemove”事件时调用的回调函数          reverse:false, //图例将以相反的顺序显示数据集。          labels:{ //图例标签配置            boxWidth:10 ,//彩色框的宽度            fontSize:"20", //文本的字体大小            fontStyle:"normal", //字体风格            fontColor:"red", // 文本的颜色            padding:10, //填充行之间的彩色框            fontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", //字体家族            usePointStyle:false //标签样式将匹配相应的点样式（大小基于fontSize，在这种情况下不使用boxWidth）          }        },        animation: {//设置不做动画 （可以提高性能）          duration: 0// general animation time        },        hover: {          animationDuration: 0// duration of animations when hovering an item        },        responsiveAnimationDuration: 0, // animation duration after a resize        tooltips:{  //对点击提示框的配置          enabled:true, //是否启用工具提示          custom:null,   //类型是function 可以自定义提示框          mode:"point"              /*              提示框可以出现那些数据  （              1、point 点  查找与点相交的所有项目。              2、nearest 最近的数据 获取距离该点最近的项目。最近的项目是根据到图表项目中心的距离（点，条）确定的。如果2个或更多项目在相同的距离，则使用面积最小的项目。如果intersect为true，则仅在鼠标位置与图形中的项目相交时触发。这对组合图表非常有用，其中点隐藏在条形图的后面。              3、index 标签 在相同的索引处查找项目。如果intersect设置为true，则使用第一个相交项目来确定数据中的索引。如果为intersectfalse，则在x方向上最近的项目用于确定索引。              4 dataset 数据集 在相同的数据集中查找项目。如果intersect设置为true，则使用第一个相交项目来确定数据中的索引。如果为intersectfalse，则使用最近的项目来确定索引              5 x 仅返回基于X位置坐标相交的所有项目。对于垂直游标实现将是有用的              6 y 根据Y位置的坐标返回所有相交的项目。这对于水平游标实现是有用的              ）              callbacks:{ //所有的回调函数 http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks              }              backgroundColor："red" //背景颜色等等              详细配置参考 git http://www.chartjs.org/docs/latest/configuration/tooltip.html                */        },        title: {                //对标题的配置          display: true,//是否显示          text: 'Custom Chart Title:0.38', //title内容          position:"left",     //title位置          fontSize:20,   //字体大小 默认为12px          fontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", //字体家族文本          fontColor:'#666',          fontStyle:'bold', //字体样式          padding:10, //在标题文本上方和下方添加的像素数量          lineHeight:10 //单行文本的高度        },        scales:{ //对x，y轴进行个人配置及对 网格等进行个性化配置都写在此处          yAxes:[{     //对Y轴进行配置            ticks:{   //对Y轴开始配置              beginAtZero:true,//如果为true，则如果还没有包含，则标度将包括0。              suggestedMin: 1,//计算最小数据值时使用的调整              suggestedMax: 5,//计算最小数据值时使用的调整              stepSize:1, //用户定义的比例尺的固定步长              maxTicksLimit:1, //最大数量的刻度线和网格线显示              min:0,  //用户定义的最小数量，覆盖数据的最小值              max:0,   //用户定义的最大数量，覆盖数据的最大值            },            gridLines: {//Y轴网格配置              display:false, //如果为false，则不显示该轴的网格线。              color:"red",//网格线的颜色。如果指定为数组，第一种颜色适用于第一个网格线，第二个适用于第二个网格线，依此类推              borderDash:1,//网格线上的破折号的长度和间距              borderDashOffset:1,//折线为破折号              lineWidth:1, //网格线的行程宽度              drawBorder:true,//如果为true，则在轴和图表区域之间的边缘绘制边框              drawOnChartArea:true, //如果为true，则在轴线内的图表区域绘制线条。当有多个轴时，这是很有用的，而且您需要控制绘制哪些网格线。              drawTicks:true,//如果为true，则在图表旁边的轴区域中的刻度线旁绘制线条              tickMarkLength:10, //网格线将绘制到轴区域的长度（以像素为单位）              zeroLineWidth:1, //第一个索引（索引0）的网格线的行程宽度              zeroLineColor:"red",  //第一个索引（索引0）的网格线的笔触颜色              zeroLineBorderDash:1, //第一个索引（索引0）的网格线的破折号的长度和间隔              zeroLineBorderDashOffset:1, //第一个索引（索引0）的网格线的折线偏移量              offsetGridLines:false, //如果为true，网格线将被移动到标签之间。这true在默认情况下设置在条形图中              //更多配置http://www.chartjs.org/docs/latest/axes/radial/linear.html            }          }],          xAxes:[{               //x轴同Y轴一样上配置          }]        },    })//相当于options配置    this.gradient = this.$refs.canvas //再引入chart.js的的组件内开始绘图  }}