Echarts 入门实例--金山打字折线图_echarts实现软键盘-优快云博客

本文链接：https://blog.youkuaiyun.com/Eilan_Chiu/article/details/126803111

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

需求分析：
这次仿的是我的信息这一页面，该页面包含三个大的组件：我的信息，进步曲线和打字水平，第一个页面没有具体实现，第二个页面是折线图，第三个页面是查看折线图。
我写了第一个和第二个页面如下图所示：
在这里插入图片描述

具体说说第二个页面：这个页面顶部有一排按钮用来筛选不同的打字曲线，还有日历选择器用来筛选日期。
技术栈
因为功能相对简单就用了Echarts ，实现用的是最简单的html js css 三件套，顶部的日历是用简单的<inout type="date" />来实现的,因此可能对低版本浏览器不能用
功能实现
每个按钮点击就重绘一下 echarts

let dom = document.getElementById('main')
let chooseButton = document.getElementById('english-button')
cont lineCharts =  echarts.init(dom)
const options = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' }
      },
      legend: {
        top: 'bottom'
      },
      grid: {
        show: false
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true,
            
          },
          axisLabel: {
            formatter: '{value}'
          },
          data: [
            '2022-02-27','2022-02-28','2022-08-18','2022-08-19',
            '2022-08-20','2022-02-21','2022-08-22','2022-08-23',
            '2022-08-24','2022-08-25','2022-08-25','2022-08-26',
            
          ]
        }
      ],
      yAxis: [
        {
          type: 'value',
          //name: '正确率',
          min: 0,
          max: 100,
          position: 'right',
          axisLabel: {
            formatter: '{value} %'
          },
          //背景线
          splitLine:{
            lineStyle: 'none'
          }
        },
        {
          type: 'value',
          //name: '速度',
          min: 0,
          max: 52,
          position: 'left',
          axisLabel: {
            formatter: '{value} 字/分'
          }
        }
      ],
      series: [
        {
          name: '速度',
          type: 'line',
          yAxisIndex: 1,
          data: [37, 52, 40, 5, 22, 29, 25, 4, 22, 37, 39, 42, 37]
        },
        {
          name: '正确率',
          type: 'line',
          smooth: true,
          yAxisIndex: 0,
          data: [
            99, 99, 98, 97, 99, 100, 99, 100, 99, 99, 99, 99, 99
          ],
          itemStyle: {
            color: 'red'
          }
        }
      ]
    }

//每次点击就销毁dispose 实例
chooseButton.onclick  = function(){
	lineCharts.dispose()
	//修改数据
	options.series.data= {
		//...
	}
	
	lineCharts.init(dom)
	lineCharts.setOption(options)
}

项目源码
https://github.com/Suiyizhi12138/king-line-echart

项目迭代
本Demo没有实现许多功能，仍有许多bug，可以考虑使用element-ui 重写一下日历选择器，以及写一下第三个页面