簡介： 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 重寫一下日歷選擇器 ，以及寫一下第三個頁面

總結

以上是生活随笔為你收集整理的Echarts 入门实例--金山打字折线图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。