自绘制仪表盘canvas
发布于 4 年前 作者 xia22 4666 次浏览 来自 分享

仪表盘参数API:网站 http://jstopo.top

yuanArg:{//设置仪表盘的样式尺寸

				 arcTextVal: "202.6V",//显示的刻度

			   arcTextTitle: "电压仪表",//显示的title

		    arcTextValRight: "20.7A",//显示的刻度 右侧电流

		  arcTextTitleRight: "电流仪表",//显示的title-右侧电流表

				   totalVal: 260,//整个圆弧代表260

					dataVal: (202.6/260).toFixed(2),//圆弧270总弧度(0-270),val/270\*100%数据占圆弧的百分比

			  totalValRight: 30,//整个圆弧代表30

		       dataValRight: (20.7/30).toFixed(2),//圆弧270总弧度(0-270),val/270\*100%数据占圆弧的百分比【0~1】		

			arcOutLineWidth: 4,//外圆弧的线条宽

			   arcOutRadius: 0.45,//设置仪表盘最外层圆弧的R半径

				 arcUpColor: "\#ff3355",//设置数据 上层 圆弧颜色

			   arcDownColor: "\#c0c0c0",//设置 最下层圆弧的底色 灰色默认

			arcUpColorRight: "\#00bcd4",//设置数据 上层 圆弧颜色-右侧

		  arcDownColorRight: "\#c0c0c0",//设置 最下层圆弧的底色-右侧 灰色默认

				 titleColor: {left:"\#212C67",right:"\#212121"},//底下标题字体颜色

				   valColor: {left:"\#ff3355",right:"\#00bcd4"},//中间仪表值val颜色

			 splitRadiusMax: \[0.45, 0.38\],//长刻度线条的在圆弧的半径R区间

			 splitRadiusMin: \[0.38, 0.35\],//短刻度线条的在圆弧的半径R区间	
回到顶部