生活随笔
收集整理的這篇文章主要介紹了
Echarts 入门实例--金山打字折线图
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
簡(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ò),歡迎將生活随笔推薦給好友。