仪表盘canvas绘制纯手写含注释

更新记录

panel1.0.1（2020-11-19）

实例：http://jstopo.top/ 参数说明:（有Right单词的是双仪表参数，没有Right的是单仪表盘参数） arcTextVal: "202.6V",//显示的刻度 arcTextTitle: "电压仪表",//显示的title arcTextValRight: "20.7A",//显示的刻度右侧电流 arcTextTitleRight: "电流仪表",//显示的title-右侧电流表 totalVal: 260,//整个圆弧代表260 dataVal: (202.6/260).toFixed(2),//圆弧270总弧度（0-270），val/270100%数据占圆弧的百分比 totalValRight: 30,//整个圆弧代表30 dataValRight: (20.7/30).toFixed(2),//圆弧270总弧度（0-270），val/270100%数据占圆弧的百分比【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区间

平台兼容性

Vue2	Vue3
√	×

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 2.9.10 app-vue	×	×	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
×	×	×	×	×	×	×	×	×

yuanArg: { //设置仪表盘的样式尺寸 arcTextVal: "202.6V", //显示的刻度 arcTextTitle: "电压仪表", //显示的title arcTextValRight: "20.7A", //显示的刻度右侧电流 arcTextTitleRight: "电流仪表", //显示的title-右侧电流表 totalVal: 260, //整个圆弧代表260 dataVal: (202.6 / 260).toFixed(2), //圆弧270总弧度（0-270），val/270100%数据占圆弧的百分比 totalValRight: 30, //整个圆弧代表30 dataValRight: (20.7 / 30).toFixed(2), //圆弧270总弧度（0-270），val/270100%数据占圆弧的百分比【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区间
}