chart实现收入曲线图表效果代码

代码语言:html

所属分类:图表

代码描述:chart实现收入曲线图表效果代码

代码标签: 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