简介: Echarts 的文档实在有点难读,咋们还是在心情平静或者有需要的时候去读一读,当然编程是一门实践的技术,所以还是写个简单的demo来得实在一些。因为我最近再用金山打字练习打字所以就拿来其中一个一个页面来模仿一下。
需求分析:
这次仿的是我的信息这一页面,该页面包含三个大的组件:我的信息,进步曲线和打字水平,第一个页面没有具体实现,第二个页面是折线图,第三个页面是查看折线图。
我写了第一个和第二个页面如下图所示:
具体说说第二个页面:这个页面顶部有一排按钮用来筛选不同的打字曲线,还有日历选择器用来筛选日期。
技术栈
因为功能相对简单就用了Echarts ,实现用的是最简单的html js css 三件套,顶部的日历是用简单的<inout type="date" />
来实现的,因此可能对低版本浏览器不能用
功能实现
每个按钮点击就重绘一下 echarts
let dom = document.getElementById('main')
let chooseButton = document.ge