设计稿：
做好的效果图：（细节自己慢慢调整）
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
svg line {
shape-rendering: crispEdges;
}
svg{
font-family: '微软雅黑'
}
</style>
<body>
<svg width="420" height="280" viewBox="0,0,420,280">
<g>
<line x1="0" y1="30" x2="420" y2="30"
style="stroke:rgb(143,143,143); stroke-width:1"></line>
<line x1="0" y1="100" x2="420" y2="100"
style="stroke:rgb(143,143,143); stroke-width:1"></line>
<line x1="0" y1="170" x2="420" y2="170"
style="stroke:rgb(143,143,143); stroke-width:1"></line>
<line x1="0" y1="240" x2="420" y2="240"
style="stroke:rgb(143,143,143); stroke-width:2"></line>
<line x1="30" y1="0" x2="30" y2="240"
style="stroke:rgb(143,143,143); stroke-width:1"></line>
<line x1="100" y1="0" x2="100" y2="240"
style="stroke:rgb(143,143,143); stroke-width:1"></line>
<line x1="170" y1="0" x2="170" y2="240"
style="stroke:rgb(143,143,143); stroke-width:1"></line>
<line x1="240" y1="0" x2="240" y2="240"
style="stroke:rgb(143,143,143); stroke-width:1"></line>
<line x1="310" y1="0" x2="310" y2="240"
style="stroke:rgb(143,143,143); stroke-width:1"></line>
<line x1="380" y1="0" x2="380" y2="240"
style="stroke:rgb(143,143,143); stroke-width:1"></line>
</g>
<g>
<text x="10" y="258" fill="#333">03.12</text>
<text x="80" y="258" fill="#333">06.15</text>
<text x="150" y="258" fill="#333">06.18</text>
<text x="220" y="258" fill="#333">07.11</text>
<text x="290" y="258" fill="#333">08.02</text>
<text x="360" y="258" fill="#333">09.18</text>
</g>
<g>
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgba(36,185,13,0.4); stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgba(255,255,255,0.6); stop-opacity:1"/>
</linearGradient>
</defs>
<path d="M30,110 L100,210 L170,60 L240,40 L310,50 L380,140 L380,240 L30,240 Z" style="fill:url(#orange_red);stroke:none;"/>
<polyline points="30,110 100,210 170,60 240,40 310,50 380,140" style="fill:none;stroke:#3fc371;stroke-width:2"/>
</g>
<g>
<circle cx="30" cy="110" r="4" stroke="rgba(63,195,113,0.4)"
stroke-width="4" fill="#3fc371"/>
<circle cx="30" cy="110" r="8" stroke="rgba(63,195,113,0.4)"
stroke-width="1" fill="none"/>
<circle cx="100" cy="210" r="4" stroke="none" fill="#3fc371"/>
<circle cx="170" cy="60" r="4" stroke="none" fill="#3fc371"/>
<circle cx="240" cy="40" r="4" stroke="none" fill="#3fc371"/>
<circle cx="310" cy="50" r="4" stroke="none" fill="#3fc371"/>
<circle cx="380" cy="140" r="4" stroke="none" fill="#3fc371"/>
<circle cx="380" cy="140" r="4" stroke="rgba(63,195,113,0.4)"
stroke-width="4" fill="#3fc371"/>
<circle cx="380" cy="140" r="8" stroke="rgba(63,195,113,0.4)"
stroke-width="1" fill="none"/>
</g>
</svg>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。