最近项目要做个手机端的仪表盘，但是画风太给力，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>
时间： 2024-10-05 23:24:27