Echarts 入门实例--金山打字折线图

本文通过一个简单的Echarts实例,介绍了如何制作金山打字练习的折线图。项目包含了日历筛选和不同打字曲线的展示,使用HTML、JS和CSS实现,顶部的日历部分采用简单方法编写,可能不适用于所有浏览器。源码已开源,未来可考虑使用element-ui改进。
摘要由CSDN通过智能技术生成

简介: Echarts 的文档实在有点难读,咋们还是在心情平静或者有需要的时候去读一读,当然编程是一门实践的技术,所以还是写个简单的demo来得实在一些。因为我最近再用金山打字练习打字所以就拿来其中一个一个页面来模仿一下。

需求分析:
这次仿的是我的信息这一页面,该页面包含三个大的组件:我的信息,进步曲线和打字水平,第一个页面没有具体实现,第二个页面是折线图,第三个页面是查看折线图。
我写了第一个和第二个页面如下图所示:
在这里插入图片描述
在这里插入图片描述
具体说说第二个页面:这个页面顶部有一排按钮用来筛选不同的打字曲线,还有日历选择器用来筛选日期。
技术栈
因为功能相对简单就用了Echarts ,实现用的是最简单的html js css 三件套,顶部的日历是用简单的<inout type="date" />来实现的,因此可能对低版本浏览器不能用
功能实现
每个按钮点击就重绘一下 echarts

let dom = document.getElementById('main')
let chooseButton = document.ge
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值