手写图表指南，你学会了吗？

createCoordinate() {
      this.svg.createLine(
        [
          {
            x1: '0',
            y1: '0',
            x2: '0',
            // ui设计稿上y轴高度为205，由于顶部游标的存在（游标高度57，宽度122），所以y轴变为205+57；
            // 由于整个坐标轴往下平移了57，所以最下面的坐标会出现不显示的情况，故再增加50的buffer
            y2: `${this.$toRealPx(262 + 50)}px`,
            stroke: '#F0F0F0',
            'stroke-width': '1',
          },
          {
            x1: '0',
            y1: `${this.$toRealPx(262 + 50)}px`,
            x2: `${this.$toRealPx(595)}px`,
            y2: `${this.$toRealPx(262 + 50)}px`,
            stroke: '#F0F0F0',
            'stroke-width': '1',
          },
        ],
        this.svgObj
      )
    }

const circlePoints = this.graphAxisData.map((v, idx) => {
        return {
          cx: v.xAxis,
          cy: v.yAxis || 0,
          r: this.$toRealPx(5),
          stroke: '#7792D8',
          'stroke-width': this.$toRealPx(3),
          fill: 'white',
          title: `class${idx + 1}`,
          imageIndex: `imageClass${idx + 1}`,
        }
      })

const circleImage = this.graphAxisData.map((v, idx) => {
        return {
          x: (v.xAxis - this.$toRealPx(122) / 2),
          y: (v.yAxis - this.$toRealPx(52) - this.$toRealPx(8)) || 0,
          height: this.$toRealPx(52),
          width: this.$toRealPx(122),
          id: `imageClass${idx + 1}`,
          href: 'https://pic3.zhuanstatic.com/zhuanzh/b13744dd-c240-4961-8054-9f923586ea5a.png',
        }
      })
      const circleText = this.graphAxisData.map((v, idx) => {
        return {
          x: v.xAxis,
          y: (v.yAxis - this.$toRealPx(52 / 2)) || 0,
          fill: '#111111',
          'font-size': this.$toRealPx(24),
          'text-anchor': 'middle',
          title: `¥${v.oriYAxis}`,
          id: `class${idx + 1}`,
        }
      })

createBezierLine() {
      const polygonPath = this.getCubicBezierCurvePath(
        this.graphAxisData.map((v) => {
          return {
            x: v.xAxis,
            y: v.yAxis,
          }
        })
      )

      this.svg.createPath(
        {
          d: polygonPath,
          fill: 'none',
          stroke: '#7792D8',
          'stroke-width': 2
        },
        this.svgObject
      )
    }
    
getCubicBezierCurvePath(knots) {
      const firstControlPoints = []
      const secondControlPoints = []
      const path = []

      this.getCubicBezierCurvePoints(knots, firstControlPoints, secondControlPoints)

      for (let i = 0, len = knots.length; i < len; i++) {
        if (i === 0) {
          path.push(['M', knots[i].x, knots[i].y].join(' '))
        } else {
          const firstControlPoint = firstControlPoints[i - 1]
          const secondControlPoint = secondControlPoints[i - 1]
          path.push(
            [
              'C',
              firstControlPoint.x,
              firstControlPoint.y, // 第一个控制点
              secondControlPoint.x,
              secondControlPoint.y, // 第二个控制点
              knots[i].x,
              knots[i].y, // 实点
            ].join(' ')
          )
        }
      }

      return path.join(' ')
    }
    
getCubicBezierCurvePoints(knots, firstControlPoints, secondControlPoints) {
      const rhs = []
      const n = knots.length - 1
      let x = 0
      let y = 0
      let i = 0

      if (n < 1) {
        return
      }

      // Set right hand side X values0
      for (i = 0; i < n - 1; ++i) {
        rhs[i] = 4 * knots[i].x + 2 * knots[i + 1].x
      }
      rhs[0] = knots[0].x + 2 * knots[1].x
      rhs[n - 1] = 3 * knots[n - 1].x

      // Get first control points X-values
      x = this.getFirstControlPoints(rhs)

      // Set right hand side Y values
      for (i = 1; i < n - 1; ++i) {
        rhs[i] = 4 * knots[i].y + 2 * knots[i + 1].y
      }
      rhs[0] = knots[0].y + 2 * knots[1].y
      rhs[n - 1] = 3 * knots[n - 1].y

      // Get first control points Y-values
      y = this.getFirstControlPoints(rhs)

      for (i = 0; i < n; ++i) {
        // First control point
        firstControlPoints[i] = {
          x: x[i],
          y: y[i],
        }

        // Second control point
        if (i < n - 1) {
          secondControlPoints[i] = {
            x: 2 * knots[i + 1].x - x[i + 1],
            y: 2 * knots[i + 1].y - y[i + 1],
          }
        } else {
          secondControlPoints[i] = {
            x: (knots[n].x + x[n - 1]) / 2,
            y: (knots[n].y + y[n - 1]) / 2,
          }
        }
      }
    }
    
getFirstControlPoints(rhs) {
      const n = rhs.length
      const x = [] // Solution vector.
      const tmp = [] // Temp workspace.
      let b = 2.0
      let i = 0
      x[0] = rhs[0] / b

      for (i = 1; i < n; i++) {
        // Decomposition and forward substitution.
        tmp[i] = 1 / b
        b = (i < n - 1 ? 4.0 : 2.0) - tmp[i]
        x[i] = (rhs[i] - x[i - 1]) / b
      }

      for (i = 1; i < n; i++) {
        x[n - i - 1] -= tmp[n - i] * x[n - i] // Backsubstitution.
      }
      return x
    }