评论

自绘制仪表盘canvas

可以支持app,H5,小程序

仪表盘参数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区间

最后一次编辑于  2020-11-19  
点赞 0
收藏
评论

1 个评论

登录 后发表内容