關(guān)注并將「趣談前端」設(shè)為星標(biāo)

每早08:30按時推送技術(shù)干貨/優(yōu)秀開源/技術(shù)思維

前言

2020東京奧運會已經(jīng)開幕很多天了，還記得小時候看奧運會的是在2008年的北京奧運會，主題曲是「北京歡迎你」，那個時候才上小學(xué)吧，幾乎有中國隊的每場必看，當(dāng)時也是熱血沸騰了，時間轉(zhuǎn)眼已經(jīng)到了2021年而我也從小學(xué)生變成了一個每天不斷敲代碼的程序員?????，看奧運的時間又少，但是又想出分力，既然是程序員，想著能為奧運會搞點什么？第一時間想到了就是給奧運獎牌數(shù)??做可視化，因為單看表格數(shù)據(jù)，不能體現(xiàn)出我們中國的牛逼??，廢話不多說，直接開寫。

數(shù)據(jù)獲得

我們先看下奧運獎牌數(shù)的表格，這東西肯定是接口獲得的吧，我不可能手寫吧，而且每天都是更新的，難道我要每天去改，肯定不是這樣的，我當(dāng)時腦子里就想著去做爬蟲，去用「puppeteer」 去模擬瀏覽器的行為然后獲取頁面的原生dom,然后將表格的數(shù)據(jù)搞出來，然后我就很興奮的去搞了，寫了下面的代碼：

const puppeteer = require('puppeteer')

async function main() {
  // 啟動chrome瀏覽器
  const browser = await puppeteer.launch({
    // // 指定該瀏覽器的路徑
    // executablePath: chromiumPath,
    // 是否為無頭瀏覽器模式，默認(rèn)為無頭瀏覽器模式
    headless: false,
  })

  // 在一個默認(rèn)的瀏覽器上下文中被創(chuàng)建一個新頁面
  const page1 = await browser.newPage()

  // 空白頁剛問該指定網(wǎng)址
  await page1.goto(
    'https://tiyu.baidu.com/tokyoly/home/tab/%E5%A5%96%E7%89%8C%E6%A6%9C/from/pc'
  )

  // 等待title節(jié)點出現(xiàn)
  await page1.waitForSelector('title')

  // 用page自帶的方法獲取節(jié)點

  // 用js獲取節(jié)點
  const titleDomText2 = await page1.evaluate(() => {
    const titleDom = document.querySelectorAll('#kw')
    return titleDom
  })
  console.log(titleDomText2, '查看數(shù)據(jù)---')
  // 截圖
  //await page1.screenshot({ path: 'google.png' })
  //   await page1.pdf({
  //     path: './baidu.pdf',
  //   })
  browser.close()
}
main()

然后當(dāng)我很興奮的想要去結(jié)果的時候，結(jié)果發(fā)現(xiàn)是空。百度是不是做了反爬蟲協(xié)議，畢竟我是爬蟲菜鳥，搞了很久。還是沒搞出來。如果有大佬會，歡迎指點我下哦！

不過這個「puppeteer」，這個庫有點牛皮的，可以實現(xiàn)網(wǎng)頁截圖、生成pdf、攔截請求，其實有點自動化測試的感覺。感興趣的同學(xué)可以自行了解一下，這不在本篇文章介紹的重點。

接口獲得

然后這時候就開始瘋狂百度，開始尋找有沒有現(xiàn)成的「api」, 真是踏破鐵鞋無覓處，得來全不費工夫。被我找到了，原來是有大佬已經(jīng)開始做了，這時候我本地直接去請求那個接口是有問題的，前端不得不處理的問題—— 跨域?？粗鴸|西我頭疼哇，不過沒關(guān)系，我直接node起一個服務(wù)器，我node去請求那個接口，然后后臺在配置下跨域，搞定接口數(shù)據(jù)就直接獲得了，后臺服務(wù)我是用的express，搭建的服務(wù)器直接隨便搞搞的。代碼如下：

const axios = require('axios')
const express = require('express')
const request = require('request')
const app = express()

const allowCrossDomain = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  res.header('Access-Control-Allow-Credentials', 'true')
  next()
}
app.use(allowCrossDomain)

app.get('/data', (req, res) => {
  request(
    {
      url: 'http://apia.yikeapi.com/olympic/?appid=43656176&appsecret=I42og6Lm',
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
    },
    function (error, response, body) {
      if (error) {
        res.send(error)
      } else {
        res.send(response)
      }
    }
  )
})
app.listen(3030)

這樣我就是實現(xiàn)了接口轉(zhuǎn)發(fā)，也搞定了跨域問題，前臺我直接用 fetch去請求數(shù)據(jù)然后做一層數(shù)據(jù)轉(zhuǎn)換，但是這個接口不能頻繁請求，動不動就crash, 是真的煩， OK所以直接做了一個操作，將數(shù)據(jù) 存到localstorage中，然后做一個定時刷新，時間大概是一天一刷。這樣就保證數(shù)據(jù)的有效性。代碼如下：

getData() {
  let curTime = Date.now()
  if (localStorage.getItem('aoyun')) {
    let { list, time } = JSON.parse(localStorage.getItem('aoyun'))
    console.log(curTime - time, '查看時間差')
    if (curTime - time <= 24 * 60 * 60 * 60) {
      this.data = list
    } else {
      this.fetchData()
    }
  } else {
    this.fetchData()
  }
}

fetchData() {
  fetch('http://localhost:3030/data')
    .then((res) => res.json())
    .then((res) => {
      const { errcode, list } = JSON.parse(res.body)
      if (errcode === 100) {
        alert('接口請求太頻繁')
      } else if (errcode === 0) {
        this.data = list
        const obj = {
          list,
          time: Date.now(),
        }
        localStorage.setItem('aoyun', JSON.stringify(obj))
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

數(shù)據(jù)如下圖所示：

柱狀圖的表示

其實我想了很多表達(dá)中國金牌數(shù)的方式，最終我還是選擇用2d柱狀圖去表示，并同時做了動畫效果，顯得每一塊金牌??來的并不容易。我還是用原生手寫柱狀圖不去使用「Echarts」 庫，我們首先先看下柱狀圖：

從圖中可以分析出一些元素

x軸和y軸以及一些直線，所以我只要封裝一個畫直線的方法
有很多矩形，封裝一個畫矩形的方法
還有一些刻度和標(biāo)尺
最后就是一進(jìn)入的動畫效果

畫布初始化

在頁面上創(chuàng)建canvas和獲取canvas的一些屬性，并對canvas綁上移動事件。代碼如下：

get2d() {
    this.canvas = document.getElementById('canvas')
    this.canvas.addEventListener('mousemove', this.onMouseMove.bind(this))
    this.ctx = this.canvas.getContext('2d')
    this.width = canvas.width
    this.height = canvas.height
  }

畫坐標(biāo)軸

坐標(biāo)軸本質(zhì)上也是一個直線，直線對應(yīng)的兩個點，不同的直線其實就是對應(yīng)的端點不同，所以我直接封裝了一個畫直線的方法：

  // 畫線的方法
  drawLine(x, y, X, Y) {
    this.ctx.beginPath()
    this.ctx.moveTo(x, y)
    this.ctx.lineTo(X, Y)
    this.ctx.stroke()
    this.ctx.closePath()
  }

可能有的人對canvas不熟悉，這里我還是大概說下，開啟一段路徑，移動畫筆到開始的點，然后畫直線到末尾的點，然后描邊這一步是canvas做渲染，很重要，很多小白不寫，直線就不出來，然后閉合路徑。結(jié)束over!

畫坐標(biāo)軸我們首先先確定原點在哪里，我們首先給畫布向內(nèi)縮一個padding距離，然后呢，算出畫布實際的寬度和高度。

代碼如下：

initChart() {
  // 留一個內(nèi)邊距
  this.padding = 50
  // 算出畫布實際的寬度和高度
  this.cHeight = this.height - this.padding * 2
  this.cWidth = this.width - this.padding * 2
  // 計算出原點
  this.originX = this.padding
  this.originY = this.padding + this.cHeight
}

有了原點我們就可以畫X軸和Y軸了，只要加上「實際畫布」對應(yīng)的寬度和高度就好了。代碼如下：

 //設(shè)置canvas 樣式
  this.setCanvasStyle()
  // 畫x軸
  this.drawLine(
    this.originX,
    this.originY,
    this.originX,
    this.originY - this.cHeight
  )
  // 畫Y軸
  this.drawLine(
    this.originX,
    this.originY,
    this.originX + this.cWidth,
    this.originY
  )

第一個函數(shù)就是設(shè)置canvas畫筆的樣式的，其實這東西沒什么。我們看下效果：

很多人以為到這里就結(jié)束了哈哈哈，那你想太多了， canvas我設(shè)置的畫線寬度是1px 為什么看圖片的線的寬度像是2px？不仔細(xì)觀察根本發(fā)現(xiàn)不了這個問題，所以我們要學(xué)會思考這到底是什么問題？其實這個問題也是我看「Echarts」源碼發(fā)現(xiàn)的，學(xué)而不思則罔，思而不學(xué)則殆哇！

彩蛋——canvas如何畫出1PX的直線

在這里我舉一個例子，你就明白了，假設(shè)我要畫從（50，10）到（200，10）這樣的一條直線。為了畫這條線，瀏覽器首先到達(dá)初始起點(50，10)。這條線寬1px，所以兩邊各留0.5px。所以基本上初始起點是從(50，9.5)延伸到(50，10.5)。現(xiàn)在瀏覽器不能在屏幕上顯示0.5像素——最小閾值是1像素。瀏覽器別無選擇，只能將起點的邊界延伸到屏幕上的實際像素邊界。它會在兩邊再加0.5倍的“垃圾”。所以現(xiàn)在，最初的起點是從(50，9)擴(kuò)展到(50，11)，所以看起來有2px寬。情況如下:

現(xiàn)在你就應(yīng)該明白了原來「瀏覽器不能顯示0.5像素哇，四舍五入了」，知道了問題我們就一定有解決方案

平移canvas

ctx.translate (x,y ) 這個方法：

translate() 方法, 將 canvas 按原始 x點的水平方向、原始的 y點垂直方向進(jìn)行「平移變換」

如圖：

說的更直白點，你對canvas做了translate變化后，你之前所有畫的點，都會相對偏移。所以呢，回到我們這個問題上來，解決辦法就是什么呢？就我將畫布整體向下偏移 0.5 ，所以原本坐標(biāo) （50，10）變成了（50.5,10.5）和（200.5, 10.5）ok 然后瀏覽器的再去畫的他還是要預(yù)留像素，所以就是從（50.5, 10）到（50.5, 11）這個區(qū)間去畫OK，就是1px了。我們來try it.

代碼如下：

this.ctx.translate(0.5, 0.5)
// 畫x軸
this.drawLine(
  this.originX,
  this.originY,
  this.originX,
  this.originY - this.cHeight
)
// 畫Y軸
this.drawLine(
  this.originX,
  this.originY,
  this.originX + this.cWidth,
  this.originY
)
this.ctx.translate(-0.5, -0.5)

偏移完之后還是要恢復(fù)過去的，還是要十分注意的。我畫了兩張圖作比對：

偏移后偏移前

不多說了，看到這里，如果覺得對你有幫助的話，或者學(xué)到了話，我是希望你給我點贊??、評論、加收藏。

畫標(biāo)尺

我們現(xiàn)在只有X軸和Y軸，光禿禿的，我給X軸和Y軸底部增加一些標(biāo)尺，X軸對應(yīng)的標(biāo)尺，肯定就是每個國家的名字，大概的思路就是數(shù)據(jù)的數(shù)量去做一個分段，然后去填充就好了。

代碼如下：

drawXlabel() {
  const length = this.data.slice(0, 10).length
  this.ctx.textAlign = 'center'
  for (let i = 0; i < length; i++) {
    const { country } = this.data[i]
    const totalWidth = this.cWidth - 20
    const xMarker = parseInt(
      this.originX + totalWidth * (i / length) + this.rectWidth
    )
    const yMarker = this.originY + 15
    this.ctx.fillText(country, xMarker, yMarker, 40) // 文字
  }
}

這里的話我截取了排名前10的國家，分段的思路，首先兩邊留白20px, 我們首先先定義每一個柱狀圖的寬度假設(shè)是 30 對應(yīng)上文的 this.rectWidth, 然后每個文字的坐標(biāo) 其實就很好算了，起初的x + 所占的分端數(shù) + 矩形寬度就可以畫出來了

如圖：

x軸畫完了，我們開始畫Y軸， Y軸的大概思路就是以最多的獎牌數(shù)去做分段，這里我就分成6段吧。

// 定義Y軸的分段數(shù)
this.ySegments = 6
//定義字體最大寬度
this.fontMaxWidth = 40

接下啦我們就開始計算Y軸每個點的Y坐標(biāo)， X坐標(biāo)其實很好計算只要原點坐標(biāo)的X向左平移幾個距離就好了，主要是計算Y軸的坐標(biāo)，這里一定要注意的是，我們從坐標(biāo)是相對于左上角的，所以呢， Y軸的坐標(biāo)應(yīng)該是向上遞減的。

drawYlabel() {
  const { jin: maxValue } = this.data[0]
  this.ctx.textAlign = 'right'
  for (let i = 1; i <= this.ySegments; i++) {
    const markerVal = parseInt(maxValue * (i / this.ySegments))
    const xMarker = this.originX - 5
    const yMarker =
      parseInt((this.cHeight * (this.ySegments - i)) / this.ySegments) +
      this.padding +
      20
    this.ctx.fillText(markerVal, xMarker, yMarker) // 文字
  }
}

最大的數(shù)據(jù)就是數(shù)組的第一個數(shù)據(jù)，然后每個標(biāo)尺就是所占的比例就好了， Y軸的坐標(biāo)由于我們是遞減的所以對應(yīng)的坐標(biāo)應(yīng)該是 1- 所占的份額，由于這只是算的圖標(biāo)的實際高度，換算到畫布里面，還要加上原先我們設(shè)置的內(nèi)邊距，由于又加上了文字，文字也占有一定像素，所以有加上了20。OK Y軸畫結(jié)束了，有了Y軸每個分段的坐標(biāo)，同時就畫出背后的對應(yīng)的幾條實線。

代碼如下：

this.drawLine(
  this.originX,
  yMarker - 4,
  this.originX + this.cWidth,
  yMarker - 4
)

最終呈現(xiàn)的效果圖如下：

畫矩形

everything isReady, 下面開始畫矩形，還是同樣的方式先封裝畫矩形的方法，然后我們只要傳入對應(yīng)的數(shù)據(jù)就OK了。

這里用到了，canvas原生的rect 方法。參數(shù)理解如下：

矩形寬度我們自定義的，矩形的高度就是對應(yīng)的獎牌數(shù)在畫布中的高度，所以我們只要確定矩形的起點就搞定了，這里矩形的（x,y）其實是左上角的點。

代碼如下：

//繪制方塊
drawRect(x, y, width, height) {
  this.ctx.beginPath()
  this.ctx.rect(x, y, width, height)
  this.ctx.fill()
  this.ctx.closePath()
}

第一步我們先做一個點的映射，我們在畫Y軸的時候，將Y軸的上的畫布的所有的點都放在一個數(shù)組中，注意記得將原點的Y放進(jìn)去。所以只要計算出每個獎牌數(shù)在總部的比例是多少？然后再用原點的Y值做一個相減就可以得到真正的Y軸坐標(biāo)了。X軸的坐標(biāo)就比較簡單了，原點的X坐標(biāo)加上（所占的比例 / 總長度）然后在加上一半的矩形寬度就好了。這個道理和畫文字是一樣的，只不過文字要居中嘛。

代碼如下：

drawBars() {
  const length = this.data.slice(0, 10).length
  const { jin: max } = this.data[0]
  const diff = this.yPoints[0] - this.yPoints[this.yPoints.length - 1]
  for (let i = 0; i < length; i++) {
    const { jin: count } = this.data[i]
    const barH = (count / max) * diff
    const y = this.originY - barH
    const totalWidth = this.cWidth - 20
    const x = parseInt(
      this.originX + totalWidth * (i / length) + this.rectWidth / 2
    )
    this.drawRect(x, y, this.rectWidth, barH)
  }
}

畫出的效果圖如下：

矩形交互優(yōu)化

黑禿禿的也丑了吧，一個不知道的人根本不知道這是哪一個國家獲得多少塊金牌。

給矩形加一個漸變
加一些文字

現(xiàn)在畫矩形的基礎(chǔ)上加一些文字吧，代碼如下：

this.ctx.save()
this.ctx.textAlign = 'center'
this.ctx.fillText(count, x + this.rectWidth / 2, y - 5)
this.ctx.restore()

漸變就設(shè)計到Canvas一個api了，createLinearGradient

?
createLinearGradient() 方法需要指定四個參數(shù)，分別表示漸變線段的開始和結(jié)束點。
?

那我就開始了首先肯定創(chuàng)建漸變：

getGradient() {
  const gradient = this.ctx.createLinearGradient(0, 0, 0, 300)
  gradient.addColorStop(0, 'green')
  gradient.addColorStop(1, 'rgba(67,203,36,1)')
  return gradient
}

然后呢我們就改造drawReact下，這里用了 restore 和save 這個方法，防止污染文字的樣式。

//繪制方塊
drawRect(x, y, width, height) {
  this.ctx.save()
  this.ctx.beginPath()
  const gradient = this.getGradient()
  this.ctx.fillStyle = gradient
  this.ctx.strokeStyle = gradient
  this.ctx.rect(x, y, width, height)
  this.ctx.fill()
  this.ctx.closePath()
  this.ctx.restore()
}

如圖所示：

添加動畫效果

光一個靜態(tài)的不能看出我們的牛皮??，所以得有動畫的效果慢慢的增加對吧。其實我們可以思考??下整個動畫過程，變化的其實就兩個，柱狀圖的高度和文字，其實坐標(biāo)軸，以及柱狀圖的x坐標(biāo)是不變的，所以我只要定義兩個變量一個開始的值，和一個總共的值，高度和文字的大小其實在每一幀去乘以對應(yīng)的高度就可以了。

代碼如下：

// 運動相關(guān)
this.ctr = 1
this.numctr = 100

我們改造下drawBars 這個方法：

// 每一次的比例是多少
const dis = this.ctr / this.numctr

// 柱狀圖的高度 乘以對應(yīng)的比例
const barH = (count / max) * diff * dis

// 文字這里取整下，因為有可能除不盡 
this.ctx.fillText(
  parseInt(count * dis),
  x + this.rectWidth / 2,
  y - 5
)

// 最后執(zhí)行動畫
if (this.ctr < this.numctr) {
  this.ctr++
  requestAnimationFrame(() => {
    this.ctx.clearRect(0, 0, this.width, this.height)
    this.drawLineLabelMarkers()
  })
}