console
//数据
let obj={
"tagName": "交易活跃度特征",
"tagValues": ["理财","借贷"],
"tagUUID": "CT_TRAD_ACTIVE",
"tagValueUUIDs": ["CT_TRAD_ACTIVE_FINANCE","CT_TRAD_ACTIVE_DEBIT"],
"allTagValues": ["借贷",
"卡消费",
"分期",
"资金转出",
"资金转入",
"理财"],
"allTagValusUUIDs": ["CT_TRAD_ACTIVE_DEBIT",
"CT_TRAD_ACTIVE_CARD",
"CT_TRAD_ACTIVE_INSTAL",
"CT_TRAD_ACTIVE_TRANSOUT",
"CT_TRAD_ACTIVE_TRANSIN",
"CT_TRAD_ACTIVE_FINANCE"]
}
let obj1={
"tagName": "消费特征",
"tagValues": ["美食家","月光一族","网购达人","有车一族","购物达人"],
"tagUUID": "CT_TRAD_CONSUME",
"tagValueUUIDs": ["CT_TRAD_CONSUME_EAT","CT_TRAD_CONSUME_MOONLIGHT","CT_TRAD_CONSUME_ONLINE","CT_TRAD_CONSUME_CAR","CT_TRAD_CONSUME_SHOP"],
"allTagValues": ["美食家",
"奢侈品爱好者",
"商旅人士",
"艺术品收藏家",
"娱乐达人",
"购物达人",
"有车一族",
"刷卡达人",
"网购达人",
"月光一族"],
"allTagValusUUIDs": ["CT_TRAD_CONSUME_EAT",
"CT_TRAD_CONSUME_LUXURY",
"CT_TRAD_CONSUME_BUSINESS",
"CT_TRAD_CONSUME_ART",
"CT_TRAD_CONSUME_ENTERTAIN",
"CT_TRAD_CONSUME_SHOP",
"CT_TRAD_CONSUME_CAR",
"CT_TRAD_CONSUME_CARD",
"CT_TRAD_CONSUME_ONLINE",
"CT_TRAD_CONSUME_MOONLIGHT"]
}
let obj2={
"tagName": "持有产品偏好",
"tagValues": ["活期","保险","基金"],
"tagUUID": "CT_PREF_PROD",
"tagValueUUIDs": ["CT_PREF_PROD_DEPOSIT","CT_PREF_PROD_CURRENT","CT_PREF_PROD_FINANCE"],
"allTagValues": ["活期",
"保险",
"理财",
"基金",
"国债",
"定期"],
"allTagValusUUIDs": ["CT_PREF_PROD_DEPOSIT",
"CT_PREF_PROD_CURRENT",
"CT_PREF_PROD_INSURAN",
"CT_PREF_PROD_FINANCE",
"CT_PREF_PROD_FUND",
"CT_PREF_PROD_BOND"]
}
let obj3={
"tagName": "交易类型偏好",
"tagValues": ["消费","取现","转账"],
"tagUUID": "CT_PREF_TRAD",
"tagValueUUIDs": ["CT_PREF_TRAD_CONSUME","CT_PREF_TRAD_CASH","CT_PREF_TRAD_TRANSFER"],
"allTagValues": ["消费",
"取现",
"转账",
"查询"],
"allTagValusUUIDs": ["CT_PREF_TRAD_CONSUME",
"CT_PREF_TRAD_CASH",
"CT_PREF_TRAD_TRANSFER",
"CT_PREF_TRAD_INQUERY"]
}
class drawFeature{
constructor(obj,id){
this.data = obj; //获取数据
this.colors = {
//线条颜色,内圆填充色，弧线条色,填充色
'CT_TRAD_ACTIVE':['#A0DBF2','#F3FCFF','#44BBE7','rgba(68,187,230,0.5)'],
'CT_TRAD_CONSUME':['#C3E493','#EFFBDE','#8ECA36','rgba(149,205,66,0.7)'],
'CT_PREF_PROD':['#FDEEA9','#FFF7D8','#FFC803','rgba(255,227,128,0.5)'],
'CT_PREF_TRAD':['#DBE2FE','#F8F9FE','#7C97E4','rgba(185,200,241,0.5)']
}
//选用样式
this.activeStyle = {
'round':{
starAngle:0, //起始角度
endAngle:360, //结束角度
anticlockwise:true, //默认顺时针
radius:75, //半径
border:[1,this.colors[this.data.tagUUID][0]], //边框宽度值,颜色
bgColor:'#fff' //背景色
},
'dashround_1':{
step:5, //虚线间距
starAngle:0, //起始角度
endAngle:360, //结束角度
anticlockwise:true, //默认顺时针
radius:60, //半径
border:[1,this.colors[this.data.tagUUID][0]], //边框宽度值,颜色
bgColor:'#fff', //背景色
innerBorder:[0,'#fff'], //内环边框
innerBgColor:this.colors[this.data.tagUUID][1] //内环背景色
},
'dashround_2':{
step:10, //虚线间距
starAngle:0, //起始角度
endAngle:360, //结束角度
anticlockwise:true, //默认顺时针
radius:45, //半径
border:[1,this.colors[this.data.tagUUID][0]], //边框宽度值,颜色
bgColor:'#fff', //背景色
innerBorder:[0,'#fff'], //内环边框
innerBgColor:'#fff' //内环背景色
},
'dashround_3':{
step:15, //虚线间距
starAngle:0, //起始角度
endAngle:360, //结束角度
anticlockwise:true, //默认顺时针
radius:30, //半径
border:[1,this.colors[this.data.tagUUID][0]], //边框宽度值,颜色
bgColor:'#fff', //背景色
innerBorder:[0,'#fff'], //内环边框
innerBgColor:this.colors[this.data.tagUUID][1] //内环背景色
},
'dashround_4':{
step:20, //虚线间距
starAngle:0, //起始角度
endAngle:360, //结束角度
anticlockwise:true, //默认顺时针
radius:15, //半径
border:[1,this.colors[this.data.tagUUID][0]], //边框宽度值,颜色
bgColor:'#fff', //背景色
innerBorder:[0,'#fff'], //内环边框
innerBgColor:'#fff' //内环背景色
},
'screen':{ //弧
radius:60,
border:[2,this.colors[this.data.tagUUID][2]],
bgColor:this.colors[this.data.tagUUID][3]
},
'line':{
width:75,
border:[1,this.colors[this.data.tagUUID][0]]
},
'smallRound':{
starAngle:0,
endAngle:360,
radius:3,
fatherRadius:60,
border:[2,this.colors[this.data.tagUUID][2]],
noBorder:[2,'red'],
bgColor:'#fff'
},
'text':{
radius:90, //在外圆半径
font:'14px Arial',
color:'#465368',
noColor:'#BEC7D0',
offsetPosition:{x:0,y:3} //偏移位置
},
'canvasStyle':{
border:[0,'#fff'], //边框宽度值,颜色
bgColor:'#fff', //背景色
}
}
//创建canvas
//let canvas = document.createElement('canvas');
let canvas = document.getElementById(id);
canvas.width = 300;
canvas.height = 300;
//获取绘图环境
let ctx = canvas.getContext('2d');
if(!ctx) alert('浏览器不支持canvas，请升级浏览器');
//获取中心坐标
let centre = {x:canvas.width/2,y: canvas.height/2};
//填充画布背景色
this.drawRect(ctx,0,0,canvas.width,canvas.height,this.activeStyle.canvasStyle.border[0],this.activeStyle.canvasStyle.border[1],this.activeStyle.canvasStyle.bgColor);
//画实线圆
this.drawSolidRound(ctx, centre.x, centre.y,this.activeStyle.round);
//画虚线圆
this.drawDashRound(ctx,centre.x, centre.y,this.activeStyle.dashround_1);
this.drawDashRound(ctx,centre.x, centre.y,this.activeStyle.dashround_2);
this.drawDashRound(ctx,centre.x, centre.y,this.activeStyle.dashround_3);
this.drawDashRound(ctx,centre.x, centre.y,this.activeStyle.dashround_4);
//画等分线
this.drawAngleSolid(ctx,centre.x,centre.y,this.activeStyle.line);
//画弧描边
this.drawMoreScreen(ctx);
//画小圈圈
this.drawSmallCircle(ctx,centre.x, centre.y,this.activeStyle.smallRound);
//添加文字
this.drwaText(ctx,centre.x, centre.y,this.activeStyle.text);
this.createImg = canvas.toDataURL("image/jpeg", 1);
}
getCanvasImg(){
return this.createImg;
}
//画实线圆 round
drawSolidRound(ctx,x,y,round){
ctx.beginPath()
ctx.lineWidth = round.border[0];
ctx.strokeStyle = round.border[1];
ctx.closePath();
ctx.arc(x, y, round.radius, this.getRads(round.starAngle),this.getRads(round.endAngle),round.anticlockwise);
ctx.fillStyle = round.bgColor;
ctx.fill();
ctx.stroke();
}
//画虚线圆 dashround
drawDashRound (ctx, x, y, dashround){
let step = dashround.step / 180 * 2 * Math.PI;
for (let b = 0, e = step / 2; e <= dashround.endAngle; b += step, e += step) {
ctx.beginPath()
ctx.lineWidth = dashround.border[0];
ctx.strokeStyle = dashround.border[1];
ctx.closePath();
ctx.arc(x, y, dashround.radius, b, e);
ctx.stroke();
}
//填充内圈
ctx.beginPath()
ctx.lineWidth = dashround.innerBorder[0];
ctx.strokeStyle= dashround.innerBorder[1];
ctx.closePath();
ctx.arc(x, y, dashround.radius - dashround.border[0], this.getRads(dashround.starAngle), this.getRads(dashround.endAngle));
ctx.fillStyle= dashround.innerBgColor;
ctx.fill();
ctx.stroke();
}
//画等分线
drawAngleSolid(ctx,x,y,line){
//画等分线
let s = {
x:x,
y:y,
r:line.width
}
let num = this.data.allTagValues.length; //获取等分
let sang = this.getsolidPointAngle(num);
let spoint = this.getCircle(s,sang);
ctx.lineWidth = line.border[0];
ctx.strokeStyle = line.border[1];
let nleng = spoint.length/2;
for(let i=0;i<spoint.length/2;i++){
ctx.beginPath();
ctx.moveTo(spoint[i].x,spoint[i].y);
ctx.lineTo(spoint[i+nleng].x,spoint[i+nleng].y);
ctx.stroke();
ctx.closePath();
}
}
//多个弧度
drawMoreScreen(ctx){
let self = this;
let screenArr = this.data.tagValueUUIDs;
let allScreenArr = this.data.allTagValusUUIDs;
let angle = 360 / allScreenArr.length;
let angleArr = this.getsolidPointAngle(allScreenArr.length);
let tmpArr = [];
screenArr.forEach( val => {
let tmpobj = this.isArrayValue(val,allScreenArr);
if(tmpobj.flag){
let ang = angleArr[tmpobj.ind];
tmpArr.push(ang);
}
});
tmpArr.forEach( val =>{
self.drawScreen(ctx,canvas.width,canvas.height,this.activeStyle.screen,this.getRads(val),this.getRads(val+angle));
});
}
//画弧描边
drawScreen (ctx,canvasWidth,canvasHeight,screen,sDeg,eDeg) {
let arc = {
x: canvasWidth / 2,
y: canvasHeight / 2,
r: screen.radius
},
w = canvasWidth,
h = canvasHeight;
ctx.save();
ctx.lineWidth = screen.border[0];
ctx.strokeStyle = screen.border[1];
ctx.fillStyle = screen.bgColor;
ctx.beginPath(); // 起始点设置在圆心处
ctx.moveTo(arc.x, arc.y);
ctx.arc(arc.x, arc.y, arc.r,sDeg,eDeg); // 闭合路径
ctx.closePath();
ctx.fill();
ctx.stroke();
}
//画小圈圈
drawSmallCircle(ctx,x,y,smallRound){
let self = this;
let c ={
x:x,
y:y,
r:smallRound.fatherRadius
}
let num = this.data.allTagValues.length; //获取等分
let angles = this.getAngles(num);
let quan = this.getCircle(c,angles); //画小圈圈
quan.forEach(function(val){
self.drawSolidRound(ctx,val.x,val.y,smallRound);
});
}
//绘制矩形
drawRect(cxt,x,y,width,height,BW,BC,fillColor){
cxt.beginPath();
cxt.moveTo(x,y);
cxt.lineTo(x+width,y);
cxt.lineTo(x+width,y+height);
cxt.lineTo(x,y+height);
cxt.closePath();
cxt.lineWidth=BW;
cxt.fillStyle=fillColor;
cxt.strokeStyle=BC;
cxt.fill();
cxt.stroke();
}
//绘文字
drwaText(ctx,x,y,text){
let t = {
x:x,
y:y,
r:text.radius
}
let divide = this.data.allTagValues.length; //等分
let angles = this.bbbb(divide);
let points = this.getCircle(t,angles);
//this.drawSmallCircle(ctx,2,points)
//this.drawSolidRound(ctx,circle.x,circle.y,circle.r,0,360,{width:1,bgColor:'#000'});
let tmpArr = this.dealTextData(ctx,points,this.data.allTagValues,text.offsetPosition); //获取处理好的数据
ctx.font = text.font;
ctx.fillStyle = text.color;
tmpArr.forEach(function(val){
ctx.fillText(val.text, val.point.x, val.point.y);
});
}
//工具
//获取弧度
getRads (degrees) { return (Math.PI * degrees) / 180; }
//获取角度
getDegrees (rads) { return (rads * 180) / Math.PI; }
//获取角度等分
getAngles(num){
let angle = 360 / num;
let tmpArr = [];
for(let i=1;i<=num;i++){
tmpArr.push(angle * i);
}
return tmpArr;
}
//获取圆上任意一点坐标
getCircle(circle,circleArr){
let tmpArr = [];
tmpArr = circleArr.map(function(val){
let obj = {};
obj.x = circle.x + circle.r * Math.cos(val * Math.PI / 180);
obj.y = circle.y + circle.r * Math.sin(val * Math.PI / 180);
return obj;
});
return tmpArr;
}
//获取等分线角度
getsolidPointAngle(num){
let angle = 360 / num;
let tmpArr = [];
for(let i=0;i<num;i++){
tmpArr.push(i * angle - 90);
}
return tmpArr;
}
//bbbb
bbbb(num){
let angle = 360 / num;
let tmpArr = [];
for(let i=0;i<num;i++){
tmpArr.push(angle * i - 90 + angle/2 );
}
return tmpArr;
}
//处理文字数据
dealTextData(ctx,points,textArr,offsetPosition){
let tmpArr = [];
textArr.forEach(function(val,ind){
let obj = {};
let textWidth = ctx.measureText(val).width; //获取文本长度
if(ind < textArr.length / 2){
let point = {
x: points[ind].x + offsetPosition.x,
y: points[ind].y + offsetPosition.y
};
obj.text = val;
obj.point = point;
}else{
let point = {
x: points[ind].x + offsetPosition.x - textWidth -20,
y: points[ind].y + offsetPosition.y
};
obj.text = val;
obj.point = point;
}
tmpArr.push(obj);
});
return tmpArr;
}
//判读数组是否存在某个值
isArrayValue(val,arr){
let obj = {
flag:false,
ind:null
}
arr.forEach((v,i) =>{
if(val == v) {
obj.flag = true;
obj.ind = i;
}
});
return obj;
}
}
let a = new drawFeature(obj,'canvas');
let b = new drawFeature(obj1,'canvas1');
let c = new drawFeature(obj2,'canvas2');
let d = new drawFeature(obj3,'canvas3');
console.log(d.getCanvasImg());
<canvas id="canvas" ></canvas>
<canvas id="canvas1" ></canvas>
<canvas id="canvas2" ></canvas>
<canvas id="canvas3" ></canvas>
html,body{
background:#fff;
}
canvas{
margin:50px;
}