最近項目要做個手機端的儀表盤，但是畫風太給力，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="width: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>