如图所示:

画布组件:dashboard.vue

<template>
<div>
<canvas ref="canvas" v-if="change" id="canvas" width="600" height="400" style="width: 300px;height: 200px;"></canvas>
</div>
</template> <script>
export default {
data() {
return {
change: true,
text:['信用极差','信用较差','信用良好','信用极好']
};
},
props: ['score'],
methods: {
canvasScore(id, getScore) {
const vm = this;
if(this.common.basics.isNull(getScore)){
getScore = 999
}
let fillText=vm.text[Math.floor(getScore/250)];
if(this.common.basics.isNull(fillText)){
fillText = vm.text[3];
} new init(this.$refs.canvas, {
teamNum: 20,
radius: 10 / 2,
fullMarks:1000,
grade:getScore,
color:'#44AAC9',
fillColor:'#ffffff',
function:function(ctx,options){
ctx.font = '500 72px microsoft yahei';
ctx.textAlign = 'center';
ctx.fillStyle = '#ffffff';
ctx.fillText(options.grade, options.circle_x, options.circle_y-20);
ctx.font = '500 40px microsoft yahei';
ctx.textAlign = 'center';
ctx.fillStyle = '#ffffff';
ctx.fillText(fillText, options.circle_x, options.circle_y+45);
}
}) }
},
mounted() {
this.canvasScore('canvas', this.score);
},
watch: {
'score'() {
this.change = false;
this.$nextTick(() => {
this.change = true;
this.$nextTick(() => {
this.canvasScore('canvas', this.score);
});
});
}
}
}; /**
* @desc:canvas绘画芝麻分仪表盘
* @param:canvas canvas自身
* @param:options options配置
* @param:options-width canvas宽度
* @param:options-height canvas高度
* @param:options-teamNum 小圆的个数
* @param:options-radius 小圆的直径
* @param:options-designChartWidth //设计图宽度 默认750
* @param:options-fillColor //小圆达到指标后的填充颜色
* @param:options-color //小圆的默认颜色
* @param:options-fontSzie //字体大小
* @param:options-fontColor //字体颜色
* @param:options-fullMarks//总分数
* @param:options-grade//目标分数
* @param:options-function//其他操作 函数 接受ctx-canvas 2d options-配置
*/
function init(canvas, options) {
if (!options) {
options = {};
}
var cxt = canvas.getContext('2d');
var clientWidth = document.documentElement.clientWidth;//根据设计图中的canvas画布的占比进行设置
options.width = 371;//canvas的宽
options.height = 270;//canvas的高
var canvasWidth = Math.floor(clientWidth * options.width / (options.designChartWidth ? options.designChartWidth : 750));
var canvasHeight = Math.floor(clientWidth * options.height / (options.designChartWidth ? options.designChartWidth : 750));
canvas.setAttribute('width', canvasWidth*this.getDevicePixelRatio());
canvas.setAttribute('height', canvasHeight*this.getDevicePixelRatio());
canvas.style.width = canvasWidth+'px';
canvas.style.height = canvasHeight+'px';
options.radius = options.radius || 50 / 10;//小圆的直径
options.radius = options.radius*this.getDevicePixelRatio()
options.team_num = options.teamNum || 10;//小圆的个数
options.circle_r = canvas.getAttribute('width') / 2 - options.radius; // 半径
options.circle_x = 0 + options.circle_r + options.radius; // 圆心坐标x
options.circle_y = 0 + options.circle_r + options.radius;//圆心坐标y
this.loadTeams(cxt, options);
}
init.prototype = {
loadTeams(cxt, options) {//加载布局模拟图
this.font(cxt, options);
this.seating(cxt, options);
},
font(cxt, options) {//加载图中文案
if(options.function){
options.function(cxt, options);
}
},
seating(cxt, options) { //分配小圆座次
var angle = 230 / options.teamNum; //角度
var a = options.fullMarks/options.teamNum;//计算每个小圆代表的值
var team_x = 0, team_y = 0;
var team_r = options.radius; // options.team_num < 20 ? 10 : Math.sqrt(options.circle_r * options.circle_r * 2 * (1 - Math.cos(changeRadian(angle)))) / 2;
//余弦定理 计算小圆的最大半径 BC2=AB2+AC2-2×AB×AC×cosα 如果小圆数目小于20个,半径最大30(上限)
for (var i = 0; i < options.teamNum; i++) {
team_x = options.circle_x + Math.sin(this.changeRadian((i * angle) + 250.9)) * options.circle_r; //角度转弧度
team_y = options.circle_y - Math.cos(this.changeRadian((i * angle) + 250.9)) * options.circle_r;
cxt.beginPath();
cxt.arc(team_x, team_y, team_r, 0, 2 * Math.PI);
if((i+1)*a<=options.grade)cxt.fillStyle = options.fillColor ? options.fillColor : 'red';
else cxt.fillStyle = options.color ? options.color : '#333333';
cxt.fill();
}
},
changeRadian(angle) { //角度转换为弧度
return Math.PI / 180 * angle;
},
getDevicePixelRatio (){//避免手机端失帧
return window.devicePixelRatio || 1;
}
}
</script> <style scoped> </style>

父组件引用画布组件

      <dashboard class="sizeQuery" :score="this.scoreVal"></dashboard>
scoreVal为分数值,从后台获取可得,从而传给画布组件。

此文为原创,不可转发。

vue 使用canvas仿芝麻分信用表的更多相关文章

  1. canvas仿芝麻信用分仪表盘

    这是一个仿支付宝芝麻信用分的一个canvas,其实就是一个动画仪表盘. 首先, 上原图: 这个是在下支付宝上的截图,分低各位见笑了.然后看下我用canvas实现的效果图: <canvas id= ...

  2. 使用Vue.js制作仿Metronic高级表格(一)静态设计

    Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...

  3. Canvas 仿百度贴吧客户端 loading 小球

    前言 几天前在简书上看到在一篇文章<Android仿百度贴吧客户端Loading小球>,看了一下作者,他写了两个好玩的 demo,效果图如下: 今天趁着周末有空,用 H5 的 Canvas ...

  4. vue + element 动态渲染、移除表单并添加验证

    博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...

  5. java-js知识库之一——canvas绘制9*9乘法表

    不知不觉一年又要过去了,软件这一行入坑快两年了,一直不知道这两年干了些啥,也不知道自己到底会些什么,工作也是些简单的东西,谁都能做,对未来也是很茫然.今天和同事优化数据库,头都是懵的,很多东西都感觉似 ...

  6. vue同一页面中拥有两个表单时,验证问题

    问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息 我们可以通过为两个表单添加ref属性 之后在通过调用resetFields()方法 ...

  7. 一起学Hive——创建内部表、外部表、分区表和分桶表及导入数据

    Hive本身并不存储数据,而是将数据存储在Hadoop的HDFS中,表名对应HDFS中的目录/文件.根据数据的不同存储方式,将Hive表分为外部表.内部表.分区表和分桶表四种数据模型.每种数据模型各有 ...

  8. hive中的分桶表

    桶表也是一种用于优化查询而设计的表类型.创建通表时,指定桶的个数.分桶的依据字段,hive就可以自动将数据分桶存储.查询时只需要遍历一个桶里的数据,或者遍历部分桶,这样就提高了查询效率 ------创 ...

  9. hive 分区表和分桶表

    1.创建分区表 hive> create table weather_list(year int,data int) partitioned by (createtime string,area ...

随机推荐

  1. week5

    本节大纲: 1.模块讲解 2.hashlib and hmac 3.random 4.shelve 5.shutil 6.time and datetime 7.os and sys 8.re 9.x ...

  2. Mysql基本操作命令【转载】

    原文链接:http://www.cnblogs.com/rookie-c/p/6425039.html 创建数据库 CREATE DATABASE name; 显示所有数据库 SHOW DATABAS ...

  3. Oracle 11g 测试ogg中断之后,重新同步操作

    测试ogg中断之后,重新同步操作 2018-06-07 17:11 779 1 原创 GoldenGate 本文链接:https://www.cndba.cn/leo1990/article/2839 ...

  4. SpringBoot Actuator

    SpringBoot Actuator 提供了检查项目内部信息的一整套API,通常在项目启动时可以看到. 1.引入依赖包 <dependency> <groupId>org.s ...

  5. Android中软键盘展示、EditText焦点获取及windowSoftInputMode属性探究

    2017-08-14 21:44:23 有很多中情况,分别展示. 1.Activity不做任何设置,布局使用LinearLayout 会自动滚动EditText之上的所有View,代码: <?x ...

  6. rnn应用

    Weather Recognition plays an important role in our daily lives and many computer vision applications ...

  7. 关于WCF服务 http://XXXXXX/XXX/xxx.svc不支持内容类型 application/sop+xml;charset=utf-8 错误解决方法

    有时候用IIS部署一个WCF服务时,无论是在客户端还是在服务端通过地址都能正常访问. 但是当你在客户端添加服务引用时, 怎么也添加不上, 会碰到了如下错误: 好啦. 现在说说怎么解决吧. 其实很简单. ...

  8. Windows Server 2008 R2 服务器系统安装及配置全过程图文详解

    前言 本文主要介绍了 windows Server 2008 R2 服务器系统的安装及相关配置. 介绍的是以优盘的方式安装. 写这篇博文的目的一来是为了供有需要的网友参考, 二来自己也在此做个记载. ...

  9. C++对象模型复习

    本文写于2017-02-24,从老账号迁移到本账号,原文地址:https://i.cnblogs.com/EditPosts.aspx?postid=6440685 一:对象模型 C++面向对象的实现 ...

  10. 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    写在前面 参考答案及资源在看云平台发布,如果大家想领取资源以及查看答案,可直接前去购买.一次购买永久可看,文档长期更新!有什么意见与建议欢迎您及时联系作者或留言回复! 文档描述 本文是关注微信小程序的 ...