簡(jiǎn)介： Echarts 的文檔實(shí)在有點(diǎn)難讀，咋們還是在心情平靜或者有需要的時(shí)候去讀一讀，當(dāng)然編程是一門(mén)實(shí)踐的技術(shù)，所以還是寫(xiě)個(gè)簡(jiǎn)單的demo來(lái)得實(shí)在一些。因?yàn)槲易罱儆媒鹕酱蜃志毩?xí)打字所以就拿來(lái)其中一個(gè)一個(gè)頁(yè)面來(lái)模仿一下。

需求分析：
這次仿的是我的信息這一頁(yè)面，該頁(yè)面包含三個(gè)大的組件：我的信息，進(jìn)步曲線(xiàn)和打字水平，第一個(gè)頁(yè)面沒(méi)有具體實(shí)現(xiàn)，第二個(gè)頁(yè)面是折線(xiàn)圖，第三個(gè)頁(yè)面是查看折線(xiàn)圖。
我寫(xiě)了第一個(gè)和第二個(gè)頁(yè)面如下圖所示：


具體說(shuō)說(shuō)第二個(gè)頁(yè)面：這個(gè)頁(yè)面頂部有一排按鈕用來(lái)篩選不同的打字曲線(xiàn)，還有日歷選擇器用來(lái)篩選日期。
技術(shù)棧
因?yàn)楣δ芟鄬?duì)簡(jiǎn)單就用了Echarts ，實(shí)現(xiàn)用的是最簡(jiǎn)單的html js css 三件套，頂部的日歷是用簡(jiǎn)單的<inout type="date" />來(lái)實(shí)現(xiàn)的,因此可能對(duì)低版本瀏覽器不能用
功能實(shí)現(xiàn)
每個(gè)按鈕點(diǎn)擊就重繪一下 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} %'},//背景線(xiàn)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'}}]}//每次點(diǎn)擊就銷(xiāo)毀dispose 實(shí)例 chooseButton.onclick = function(){lineCharts.dispose()//修改數(shù)據(jù)options.series.data= {//...}lineCharts.init(dom)lineCharts.setOption(options) }

項(xiàng)目源碼
https://github.com/Suiyizhi12138/king-line-echart

項(xiàng)目迭代
本Demo沒(méi)有實(shí)現(xiàn)許多功能，仍有許多bug，可以考慮使用element-ui 重寫(xiě)一下日歷選擇器 ，以及寫(xiě)一下第三個(gè)頁(yè)面

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。