Canvas 折线图组件封装

背景

前段时间开发快应用，因为快应用的生态不活跃，没有像 ECharts 这么强大的图表库，所以为了实现需求自己用原生的Canvas封装了一个。
直接上代码！！！

Canvas折线图组件代码

<template>
  <div class="wrapper">
		<canvas id="canvas"  show="{{ isHaveData }}" style="width:{{canvasWH.width + 'px'}}; height: {{canvasWH.height + 'px'}};"></canvas>
    <div show="{{ !isHaveData }}" class="no-data">
      <text>暂无数据</text>
    </div>
	</div>
</template>
<script>
import { getCurrentTime, hourToString, formatYAxis, checkYAxisHaveData } from '../../utils/common.js'

export default {
  props: {
    padding: {
      default: { top:10, right: 10, bottom:10, left:40 }
    },
    dataZone: {
      default: { width: 640, height:400 }
    },
    showHourNum: {
      default: 8
    }
  },
	data() {
		return {
      // padding: { top:10, right: 10, bottom:10, left:40 },
      // dataZone: { width: 640, height:400 },
      xAxis: [7, 8, 9, 10, 11, 12, 13, 14, 15],
      yData: [36.5, 36.6, 36.4, 36.8, 36.1, 37.2, 36.8, "", "", "", "", "", "", 36.8, 36.8],
      isHaveData: false,
      canvasWH: {
        width: this.dataZone.width + this.padding.left + this.padding.right + 50,
        height: this.dataZone.height + this.padding.top + this.padding.bottom + 30
      }
		}
  },
  draw(endTime) {
    const canvas = this.$element('canvas')
    const context = canvas.getContext("2d")

    this.clearCanvas(context) // 清空画布
    this.drawBackground(context) // 画背景
    this.drawYAxis(context) // 画 y轴
    this.drawXAxis(context) // 画 X 轴
    this.drawLine(context, endTime) // 画折线
  },
  clearCanvas(ctx) {
    ctx.clearRect(0, 0, this.canvasWH.width, this.canvasWH.height)
  },
  drawBackground(ctx) {
    // 画背景
    const MAX = 45
    const MIN = 25
    const oneDegreeHigh = this.dataZone.height / (MAX-MIN)
    ctx.beginPath();
    let total = 0
    // 45 ~ 43
    const height0 = (45 - 43) * oneDegreeHigh
    ctx.fillStyle = "#F2F5F4"
    ctx.fillRect(this.padding.left, total+this.padding.top, this.dataZone.width, height0);
    total += height0
    // 43 ~ 37
    const height1 = (43 - 37) * oneDegreeHigh
    ctx.fillStyle = "#FFAEAE"
    ctx.fillRect(this.padding.left, total + this.padding.top, this.dataZone.width, height1);
    total += height1
    // 37 ~36
    const height2 = (37 - 36) * oneDegreeHigh
    ctx.fillStyle = "#9CF5CA"
    ctx.fillRect(this.padding.left, total + this.padding.top, this.dataZone.width, height2);
    total += height2
    // 36 ~ 32
    const height3 = (36 - 32) * oneDegreeHigh
    ctx.fillStyle = "#B1E9FF"
    ctx.fillRect(this.padding.left, total + this.padding.top, this.dataZone.width, height3);
    total += height3
    // 32 ~25
    const height4 = (32 - 25) * oneDegreeHigh
    ctx.fillStyle = "#F2F5F4"
    ctx.fillRect(this.padding.left, total + this.padding.top, this.dataZone.width, height4);
  },
  drawYAxis(ctx) {
    // 画 y轴
    const MAX = 45
    const MIN = 25
    const oneDegreeHigh = this.dataZone.height / (MAX-MIN)
    const height0 = (45 - 43) * oneDegreeHigh
    const height1 = (45 - 37) * oneDegreeHigh 
    const height2 = (45 - 36) * oneDegreeHigh
    const height3 = (45 - 32) * oneDegreeHigh
    const height4 = (45 - 25) * oneDegreeHigh
    ctx.beginPath();
    ctx.font = "bold 12px Arial"
    ctx.fillStyle = "#646464"
    ctx.textAlign = "center"
    ctx.textBaseline  = "middle"
    ctx.fillText( '45', 20, this.padding.top) // 实心文字
    ctx.fillText( '43', 20, this.padding.top + height0) // 实心文字
    ctx.fillText( '37', 20, this.padding.top + height1) // 实心文字
    ctx.fillText( '36', 20, this.padding.top + height2) // 实心文字
    ctx.fillText( '32', 20, this.padding.top + height3) // 实心文字
    ctx.fillText( '25', 20, this.padding.top + height4) // 实心文字
  },
  drawXAxis(ctx) {
    const _this = this
    axisLine(ctx) // 设置线
    axisTick(ctx, 8) // 设置刻度
    axisLabel(ctx, 18) // 设置文字
    // X 轴线
    function axisLine(ctx) {
      const start = {x: _this.padding.left - 3, y: _this.padding.top + _this.dataZone.height}
      const end = {x: _this.padding.left + _this.dataZone.width, y: _this.padding.top + _this.dataZone.height}
      ctx.beginPath();
      ctx.moveTo(start.x, start.y)
      ctx.lineWidth="1";
      ctx.strokeStyle="#808080"; // 路径Style
      ctx.lineTo(end.x, end.y)
      ctx.stroke(); // 进行绘制
    }
    // X 轴标记
    function axisTick(ctx, size) {
      const dataLen = _this.xAxis.length
      const interval = _this.dataZone.width / (dataLen - 1)
      const y0 = _this.padding.top + _this.dataZone.height - size / 2
      const y1 = _this.padding.top + _this.dataZone.height + size / 2
      ctx.beginPath();
      for (let i = 0; i < dataLen; i++) {
        ctx.lineWidth="2";
        ctx.strokeStyle="#808080"; // 路径Style
        ctx.moveTo(i*interval + _this.padding.left, y0)
        ctx.lineTo(i*interval + _this.padding.left, y1)
      }
      ctx.stroke(); // 进行绘制
    }
    // X 轴文字
    function axisLabel(ctx, top) {
      const dataLen = _this.xAxis.length
      const interval = _this.dataZone.width / (dataLen - 1)
      const y = _this.padding.top + _this.dataZone.height + top
      ctx.beginPath();
      ctx.font = "bold 12px Arial"
      ctx.fillStyle = "#646464"
      ctx.textAlign = "center"
      for (let i = 0; i < dataLen; i++) {
        const x = i * interval + _this.padding.left
        ctx.fillText( _this.xAxis[i], x, y) // 标记文字
      }
    }
  },
  drawLine(ctx, endTime) {
    const _this = this
    ctx.moveTo(0 + this.padding.left,200);
    // ctx.font = "bold 10px Arial"
    // ctx.fillStyle = "#4B4B4B"
    ctx.lineWidth="2";
    ctx.strokeStyle="#4B4B4B";
    const endMinute = endTime.slice(-4, -2)
    const xArray = calcuX(endMinute)
    let isStroke = false
    this.yData.forEach((val, index)=> {
      if (val === '') {
        isStroke = false
      } else {
        const x = xArray[index]
        const y = calcuY(val)
        if (isStroke) {
          ctx.lineTo(x, y)
          ctx.stroke(); // 进行绘制
        } else {
          ctx.beginPath();
          ctx.moveTo(x, y);
          ctx.arc(x, y, 0.5, 0, 2*Math.PI) // 画点 (x, y, 半径, 起始角度，结束角度)
          ctx.fillStyle="back"
          // ctx.fill()
        }
        isStroke = true
      }
    })

    // 计算 1 个 y轴坐标
    function calcuY(tempre) {
      const yPointInterval = _this.dataZone.height / (45 -25)
      const y = (45 - tempre) * yPointInterval + _this.padding.top
      return parseFloat(y.toFixed(1))
    }
    // 计算 全部 x轴坐标
    function calcuX(endMinute) {
      let xArray = []
      const POINT_TIME = 3 // 3分钟一个点
      const dataLen = _this.xAxis.length
      const hourInterval = _this.dataZone.width / (dataLen-1)
      const xPointInterval = hourInterval / (60 / POINT_TIME)
      const xAxisSize = _this.padding.left + _this.dataZone.width
      const lastPointX = xAxisSize - parseInt((60-endMinute)/3) * xPointInterval
      for(let i = 0; i < _this.yData.length; i++) {
        xArray.unshift(lastPointX - i * xPointInterval)
      }
      return xArray
    }
  },

  createXbyEndTime(endTime) {
    let endHour = endTime.slice(-6, -4)
    let arr = []
    let hour = parseInt(endHour) + 1 // 在当前小时的基础上，多增加 1 小时
    for (let i = 0; i < 24; i++) {
      if (hour < 0) {
        arr.unshift(hourToString(hour + 24))
      } else {
        arr.unshift(hourToString(hour))
      }
      hour--
    }
    return arr
  },
  initChart(endTime, originalYArray) {
    const showDataLength = this.showHourNum * 20 // 一小时20个点
    const endMinute = endTime.slice(-4, -2)
    const offsetPoint = parseInt((60-endMinute)/3 - 1) // 差几个点补全最后一小时
    this.yData = formatYAxis(originalYArray).slice(0 - (showDataLength-offsetPoint))
    this.xAxis = this.createXbyEndTime(endTime).slice(0 - (this.showHourNum+1))
    this.isHaveData = checkYAxisHaveData(this.yData)
    this.draw(endTime)
    console.log(`加载canvas endTime=${endTime} originalYArray=${originalYArray} xAxis=${this.xAxis}`)
  },
}
</script>
<style lang="scss" scoped>
@import './../../assets/styles/style.scss';
.wrapper {
  padding-top: 10px;
}
.box {
	width: 740px;
	height: 450px;
}
.no-data {
  width: 100%;
  height: 500px;
  justify-content: center;
  text {
    text-align: center;
  }
}
</style>