基本概念

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

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

官网地址

https://vue-chartjs.org/

GitHub

https://github.com/apertureless/vue-chartjs

DEMO

http://demo.vue-chartjs.org/

API

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

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

https://www.chartjs.org/docs/latest/

npm

npm install vue-chartjs chart.js --save

组件

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


其他组件：
mixins
generateChert

示例组件

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的的组件内开始绘图
  }
}