前端 Vue实现彩票走势图

Vue结合JQ实现彩票中奖走势图

1. 在vue项目安装Jq

npm install jquery --save

2. 在页面进行引用即可

import $ from "jquery

2. html代码块

<template>
  <div class="test-content">
    <div class="line-main">
      <div class="title-list">
        <div
          class="title-list-item"
          v-for="(item, index) in titleList"
          :key="index"
        >
          {{ item }}期
        </div>
      </div>
      <table class="chartsTable">
        <tbody>
          <tr v-for="(item, index) in dataList" :key="index">
            <td
              v-for="(items, indexs) in item"
              :key="items"
              :id="`T${index + 1}_${indexs + 1}`"
            >
              {{ items }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="canvasdiv"></div>
  </div>
</template>

4. 页面使用方法

    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);
      }
    },

5. 在mounted调用

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

6. 最终实现效果

总结：

1、Vue结合Jq以及canvas的使用，完成简单的彩票走势图，主要还是得理解canvas划线原理和获取DOM元素的位置等；
2、写的不好，敬请参考,如有疑问，评论区见。