最近项目要做个手机端的仪表盘，但是画风太给力，echarts、highcharts、D3等等都不能满足业务的需求，你懂的！开找，找到个gauge.js
下面简单介绍下这个插件官网http://bernii.github.io/gauge.js/?utm_source=tuicool&utm_medium=referral
具体需要实现的效果：如图
指针会跟随数的改变而改变，并且会拖动下面的投影移动
主要是注意一下父级div和子集cavas就可以。
具体讲代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="400px; type="gauge"> <!--这里要加type="gauge";不加你懂的什么都没有-->
<canvas width=200 height=150 id="foo"></canvas> <!--设置ID、长、宽-->
</div>
</body>
<script src="../dist/jquery.min.js"></script>
<script src="../dist/gauge.min.js"></script>
<script>
var opts = {
lines: 12, // The number of lines to draw
angle: 0, // The length of each line
lineWidth: 0.44, // The line thickness
pointer: {
length: 0.93, // The radius of the inner circle
strokeWidth: 0.053, // The rotation offset
color: '#000000' // Fill color
},
limitMax: 'false', // If true, the pointer will not go past the end of the gauge
colorStart: '#6FADCF', // Colors
colorStop: '#8FC0DA', // just experiment with them
strokeColor: '#E0E0E0', // to see which ones work best for you
generateGradient: true
};
var target = document.getElementById('foo'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.animationSpeed = 25; // set animation speed (32 is default value)
gauge.set(650); // set actual value
</script>
<script>
$.fn.gauge = function(opts) {
this.each(function() {
var $this = $(this),
data = $this.data();
if (data.gauge) {
data.gauge.stop();
delete data.gauge;
}
if (opts !== false) {
data.gauge = new Gauge(this).setOptions(opts);
}
});
return this;
};
</script>
</html>