//移动端 的 需要自己做机型适配
用npm 下载 vue-chartjs chart.js 依赖包
（只是demo）
和vue进行结合，创建一个chartjs,
引入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"//圆点的半径
}
],
}//相当于datae配置,{
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轴一样上配置
}]
},
}
this.gradient = this.$refs.canvas 再引入chart.js的的组件内开始绘图
}//相当于options配置
//暂时只有这么多 未完待续。。。。。。。。