chart实现收入曲线图表效果代码
代码语言:html
所属分类:图表
代码描述:chart实现收入曲线图表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<style>
:root {
--background: #070707;
--background-widget: #181818;
--primary: #3DA06E;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Poppins', sans-serif;
background-color: var(--background);
height: 100vh;
}
.widget {
border-radius: 0.75rem;
background-color: var(--background-widget);
padding: 1rem;
max-width: 40rem;
width: 100%;
min-width: 20rem;
}
.widget canvas {
min-height: 20rem;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chart.umd.4.4.1.js"></script>
</head>
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0