案例如图：
<section class=" chartWrap">
<div class="chartContent">
<div class="chartInfo">
<canvas class="canvasVip " id="chartEl" width="240" height="240">你的浏览器不支持canvas</canvas>
<div class="moneyInfo">
<div class="moneyInfoUp">
<p class="nowAbleTips">可用额度</p>
<strong ><em>￥</em><span class="nowAblePay">20000</span></strong>
</div>
<div class="moneyInfoDown">
<p class="overBorrow">已认证额度</p>
<strong ><em>￥</em><span class="borrowMoney">50000</span></strong>
</div>
</div>
</div>
</div>
</section>
===============style===================
@charset "utf-8";
/* 禁用iPhone中Safari的字号自动调整 */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* 去除iPhone中默认的input样式 */
input[type="submit"], input[type="reset"], input[type="button"], input {
-webkit-appearance: none;
resize: none;
}
/* 局部滚动使用弹性滚动效果 */
body{-webkit-overflow-scrolling:touch;}
/* 取消链接高亮 */
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/* 图片自适应 */
img {
100%;
height: auto;
auto9; /* ie8 */
-ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/
}
/* 初始化 */
body, div, ul, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0;
border: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
color: #555;
background-color: #F7F7F7;
}
em, i {
font-style: normal;
}
strong {
font-weight: normal;
}
.clearfix:after {
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}
a {
text-decoration: none;
color: #969696;
font-family: '宋体', Microsoft YaHei, Tahoma, Arial, sans-serif;
}
a:hover {
color: #FED503;
text-decoration: none;
}
ul, ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-family: Microsoft YaHei;
}
img {
border: none;
}
/*清除浮动*/
.clearfix{*zoom:1;}.clearfix:after,.clearfix:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}.z{_zoom:1;}
/*连续英文、数字换行*/
.wordwrap { word-break: break-all; word-wrap: break-word; }
/*单行文字超出显示省略号*/
.omg{overflow: hidden; text-overflow: ellipsis; white-space:nowrap;}
/*水平对齐方式*/
.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}
/*垂直对齐方式*/
.vm{vertical-align:middle;}.vtb{vertical-align:text-bottom;}.vt{vertical-align:top;}.vn{vertical-align:-2px;}.vimg{margin-bottom:-3px;}
html{font-size: 40px;}
.box{200px;height: 200px;background: yellowgreen;margin:100px auto;}
/* 借款占比表 */
.chartWrap{margin-top:2.2rem;100%;height:320px;background-image:-webkit-linear-gradient(to bottom, #1B1C22, #2E3144); background-image:linear-gradient(to bottom, #1B1C22, #2E3144);}
.chartWrap h3{font-size: 0.75rem;font-weight:normal;color:#fff;text-align: center;padding:0.5rem 0 0.35rem;}
.chartWrap .chartInfo{position:relative;260px;height:260px;margin:0 auto;}
.chartWrap #chartEl{240px;height:240px;margin:10px;}
.chartWrap .moneyInfo{position:absolute;150px;height:150px;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);color:#fff;font-size: 18px;text-align: center;}
.chartWrap .moneyInfo span{font-size: 36px;}
.chartWrap .moneyInfo em{font-size: 28px;}
.chartWrap .moneyInfo span.borrowMoney{font-size: 24px;}
.chartWrap .moneyInfo strong{font-size: 34px;}
.chartWrap .moneyInfo em{font-size: 22px;}
.chartWrap .moneyInfoUp{position:relative;padding-bottom: 10px;}
.chartWrap .moneyInfoUp:before{content:'';position:absolute;140px;height:3px;bottom:0;left:50%;transform:translate(-50%,0);-webkit-transform:translate(-50%,0);}
.chartWrap .moneyInfoDown{margin-top: 10px;}
.assessDateDes{display: none;font-size: 0.6rem;text-align: center;}
.chartWrap .goToDownApp{14.7rem;font-size: 0.65rem;height:1.6rem;text-align: center;line-height: 1.6rem;border-radius:5px;margin:0 auto;display: block;margin-top: 0.4rem;position:relative;}
.chartFooter .hiladyBtn{line-height: 1.6rem;text-indent:-0.6rem;}
.chartFooter .hiladyBtn:before{position:absolute;content:"";1.6rem;height:1.6rem;left:50%;border-radius:50%;background: url(../images/GO.png) 0 0 no-repeat;-webkit-background-size: cover;background-size: cover;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);}
.vipChart{height:340px;background-image:-webkit-linear-gradient(to bottom, #1B1C22, #2E3144); background-image:linear-gradient(to bottom, #1B1C22, #2E3144);}
.vipChart .moneyInfo em,.vipChart .moneyInfo span{color:#E6BC8A;}
.vipChart .chartFooter{display: none;}
.vipChart .moneyInfoUp:before{content:'';background: #E6BC8A;}
.driverChart{height:390px;background:#FFD000;color:#393B48;}
.driverChart .moneyInfoUp:before{content:'';background: #282828;}
.driverChart .hiladyBtn{display: none;}
.driverChart .ddsjBtn{color:#fff;background: #282828;display: block;}
.higirlChart{height:390px;background: #FCC0BD;color:#393B48;}
.higirlChart .moneyInfoUp:before{content:'';background: #393B48;}
.higirlChart .ddsjBtn{display: none;}
.higirlChart .hiladyBtn{color:#fff;background: #393B48;display: block;}
.couponAndGuide{padding-left:0.625rem;background: #fff;}
.couponAndGuide>div{height:1.95rem;line-height: 1.95rem;font-size: 0.65rem;color:#333;}
.couponAndGuide>div:nth-child(1){border-bottom: 1px solid #ddd;}
.couponAndGuide>div span{float: left;}
.couponAndGuide>div i{float: right;margin-right: 0.625rem;}
.couponAndGuide>div em.couponNum{float: right;font-size: 0.55rem;margin-right: 0.4rem;}
==========js======================
var usedAmount = $(".chartInfo span.nowAblePay").text(),
totleAmount = $(".chartInfo span.borrowMoney").text(),
usedAmountAnimate = 0,
chartColorB,
chartColorF,
canvasHiLoan = document.getElementById('chartEl');
/*判断产品 区分颜色 VIPD SJD 商城 */
var arrColorF = ['#E6BC8A','#282828','#393B48'],
arrColorB = ['#494C5E','#FFE368','#D8D8D8'];
var chartColorF = arrColorF[0] , chartColorB = arrColorB[0] ;
animateDraw(usedAmountAnimate, totleAmount, canvasHiLoan,chartColorB,chartColorF);
/*画chart方法*/
function animateDraw(usedAmountAnimate, totleAmount, canvasHiLoan) {
var ctx = canvasHiLoan.getContext('2d')
setInterval(function() {
if (usedAmountAnimate < usedAmount) {
usedAmountAnimate = usedAmountAnimate + 50;
drawCanvas(usedAmountAnimate, totleAmount);
};
}, 0.8)
function drawCanvas(usedAmountAnimate, totleAmount) {
var Ratio = usedAmountAnimate / totleAmount;
if (canvasHiLoan.getContext) {
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(120, 10);
ctx.arc(120, 120, 110, -0.5 * Math.PI, 1.5 * Math.PI, false);
ctx.lineWidth = 20;
ctx.strokeStyle = chartColorB;
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(120, 10);
ctx.arc(120, 120, 110, -0.5 * Math.PI, (Ratio * 2 - 0.5) * Math.PI, false);
ctx.lineWidth = 20;
ctx.strokeStyle = chartColorF;
ctx.stroke();
}
}
/*消除锯齿*/
if (window.devicePixelRatio) {
var width = canvasHiLoan.width,
height = canvasHiLoan.height;
canvasHiLoan.height = height * window.devicePixelRatio;
canvasHiLoan.width = width * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
}
/*chart内三位加逗点不考虑小数点*/
thousandSpaces(".nowAblePay");
thousandSpaces(".borrowMoney");
/*金额千位逗点处理*/
function thousandSpaces(el) {
$(el).text($(el).text().replace(/[0-9]+?(?=(?:([0-9]{3}))+$)/g, function(a) {
return a + ','
}));
}
function getfont() {
var html1 = document.documentElement;
var screen = html1.clientWidth;
if (screen >= 640) {
html1.style.fontSize = '40px';
} else if (screen <= 320) {
html1.style.fontSize = '20px';
} else {
html1.style.fontSize = 0.0625 * screen + 'px';
}
}
getfont();
window.onresize = function() {
getfont();
}