Vue结合JQ实现CP中奖走势图

npm install jquery --save

import $ from "jquery

initCanvas() {
      let ids = "";
      let idsArr = [];
      this.innerList.map((item, index) => {
        if (item == 0) {
          item = 10;
        }
        let idName = `T${index + 1}_${item}`;
        idsArr.push(idName);
      });
      ids = idsArr.join(",");
      console.log("ids,", ids);
      this.CreateLine(ids, 20, "#7331E9", "canvasdiv", "#7331E9");
    },
    CreateLine(ids, w, c, div, bg) {
      var list = ids.split(",");
      for (var j = list.length - 1; j > 0; j--) {
        var tid = $("#" + list[j]);
        var fid = $("#" + list[j - 1]);
        var f_width = fid.outerWidth();
        var f_height = fid.outerHeight();
        var f_offset = fid.offset();
        var f_top = f_offset.top;
        var f_left = f_offset.left;
        var t_offset = tid.offset();
        var t_top = t_offset.top;
        var t_left = t_offset.left;
        var cvs_left = Math.min(f_left, t_left);
        var cvs_top = Math.min(f_top, t_top);
        tid
          .css("background", bg)
          .css("color", "#FFF")
          .css("borderRadius", "50%");
        fid
          .css("background", bg)
          .css("color", "#FFF")
          .css("borderRadius", "50%");
        var cvs = document.createElement("canvas");
        cvs.width =
          Math.abs(f_left - t_left) < w ? w : Math.abs(f_left - t_left);
        cvs.height = Math.abs(f_top - t_top);
        cvs.style.top = cvs_top + parseInt(f_height / 2) + "px";
        cvs.style.left = cvs_left + parseInt(f_width / 2) + "px";
        cvs.style.position = "absolute";
        var cxt = cvs.getContext("2d");
        cxt.save();
        cxt.strokeStyle = c;
        cxt.lineWidth = 1;
        cxt.lineJoin = "round";
        cxt.beginPath();
        cxt.moveTo(f_left - cvs_left, f_top - cvs_top);
        cxt.lineTo(t_left - cvs_left, t_top - cvs_top);
        cxt.closePath();
        cxt.stroke();
        cxt.restore();
        $("#" + div).append(cvs);
      }
    },

mounted() {
    this.initCanvas();
  },