前言：之前介绍了统计图标操作的G2，这一个插件个人认为功能相对不如G2插件强大，但是这一个插件的大小略微小一点为398k，大小还是不可忽视。另外这一个插件自己可以操作的空间相对大很多，不过都不是自己的理想选择。虽然好用，但是代价相对太大，所以还是得学好canvas，自己写啊。
插件官方地址
http://www.chartjs.org/docs/latest/
简单的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style type="text/css">
#container {
width: px;
margin: px auto;
}
</style>
<script type="text/javascript" src="chart.js"></script>
</head>
<body>
<div id="container">
<canvas id="canvas" width="400" height="200"></canvas>
</div>
<script type="text/javascript">
// 获取画布
var oCanvas = document.getElementById("canvas").getContext('2d');
// 创建对象
var oChart = new Chart(oCanvas, {
type: 'line', //图标类型
data : {
labels: ['2013', '2014', '2015', '2016', '2017', '2018'], //x轴
datasets: [{
label: '时间-销量', //title
data: [, , , , , ], //数据
backgroundColor: [ //背景颜色,可以不设置，为默认
'rgba(255, 99, 132, 0.2)',
],
borderColor: [ //边框颜色,可以不设置，为默认
'rgba(255,99,132,1)',
],
borderWidth:
}]
},
options: {
}
})
</script>
</body>
</html>
效果图
统计图标操作之Chart 
![Vue项目 - 单文件组件和Vue中的路由[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)