Canvas 实现平行基线

<template>
  <div class="main">
    <canvas id="canvas" width="160" :height="cHeight"></canvas>
    <a-table
      ref="myTable"
      :columns="columns"
      :data-source="data"
      :pagination="false"
      :rowKey="(record) => record.key"
      style="background-color: #fff"
    ></a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cHeight: "600px",
      columns: [
        {
          title: "",
          dataIndex: "id",
          align: "center",
          width: 60,
        },
        {
          title: "status",
          dataIndex: "status",
          align: "center",
        },
        {
          title: "type",
          dataIndex: "type",
          align: "center",
        },
        {
          title: "Name",
          dataIndex: "name",
          align: "center",
          scopedSlots: { customRender: "name" },
        },
        {
          title: "Cash Assets",
          className: "column-money",
          dataIndex: "money",
          align: "center",
        },
        {
          title: "Address",
          dataIndex: "address",
          align: "center",
        },
      ],
      data: [
        {
          key: "11",
          name: "John Brown",
          money: "￥300,000.00",
          address: "New York No. 1 Lake Park",
          type: 1,
          status: 3,
        },
        {
          key: "22",
          name: "Jim Green",
          money: "￥1,256,000.00",
          address: "London No. 1 Lake Park",
          type: 1,
          status: 2,
          isFlatLine: true,
        },
        {
          key: "31",
          name: "John Brown",
          money: "￥300,000.00",
          address: "New York No. 1 Lake Park",
          status: 1,
          type: 1,
        },
        {
          key: "2",
          name: "Jim Green",
          money: "￥1,256,000.00",
          address: "London No. 1 Lake Park",
          status: 0,
          type: 1,
        },
        {
          key: "3",
          name: "Joe Black",
          money: "￥120,000.00",
          address: "Sidney No. 1 Lake Park",
          status: 0,
          type: 1,
        },
        {
          key: "4",
          name: "Joe Black",
          money: "￥120,000.00",
          address: "Sidney No. 1 Lake Park",
          status: 1,
          type: 1,
        },
        {
          key: "5",
          name: "Joe Black",
          money: "￥120,000.00",
          address: "Sidney No. 1 Lake Park",
          status: 0,
          type: 1,
        },
        {
          key: "6",
          name: "Joe Black",
          money: "￥120,000.00",
          address: "Sidney No. 1 Lake Park",
          status: 0,
          type: 1,
        },
        {
          key: "7",
          name: "Joe Black",
          money: "￥120,000.00",
          address: "Sidney No. 1 Lake Park",
          status: 1,
          type: 1,
        },
        {
          key: "8",
          name: "Joe Black",
          money: "￥120,000.00",
          address: "Sidney No. 1 Lake Park",
          status: 1,
          type: 1,
          nodeType: 1,
        },
      ],
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let canvas = document.querySelector("#canvas");
      canvas.height = this.data.length * 54 - 27;
      let c = canvas.getContext("2d");
      //组合折线数据位置
      let data = [];
      let pxJxIndex = this.data.findIndex((item) => {
        return item.isFlatLine;
      });
      this.data.forEach((item, i) => {
        let obj = {};
        if (item.status == 1) {
          obj.x = 10;
          obj.y = 5 + 54 * i;
          obj.z = item.type == 1 ? 1 : 0;
        } else if (item.status == 0) {
          obj.x = 54;
          obj.y = 5 + 54 * i;
          obj.z = item.type == 1 ? 1 : 0;
        } else if (item.status == 2) {
          obj.x = 70;
          obj.y = 5 + 54 * i;
          obj.z = item.type == 1 ? 1 : 0;
        } else if (item.status == 3) {
          obj.x = 100;
          obj.y = 5 + 54 * i;
          obj.z = item.type == 1 ? 1 : 0;
        }
        if (item.nodeType == 1) {
          obj.xh = 10;
          obj.yh = 5 + 54 * i;
          obj.xhs = 70;
          obj.yhs = 5 + 54 * i;
          obj.xz = 70;
          obj.yz = 5 + 54 * i;
          obj.xzs = 70;
          obj.yzs = 5 + 54 * pxJxIndex;
        }
        data.push(obj);
      });
      //画虚线
      let isFlatLine = this.data.findIndex((item) => {
        return item.isFlatLine;
      });
      this.drawXx(
        c,
        data[isFlatLine+1].x,
        data[isFlatLine+1].y,
        10,
        this.data.length * 54 - 54,
        "#5690F8",
        "1"
      );
      this.funLx(c,data,'old')
      this.funLx(c,data,'new')
      data.forEach((item) => {
        this.drawY(c, item.x, item.y, item.z == 1 ? "#5690F8" : "#ffffff"); //画点
        this.drawHx(c, item.xh, item.yh, item.xhs, item.yhs); //画横线
        this.drawZx(c, item.xz, item.yz, item.xzs, item.yzs); //画直线
      });
    },
    drawY(c, x1, y1, color) {
      c.beginPath();
      c.arc(x1, y1, 5, 0, 2 * Math.PI);
      c.fillStyle = color;
      c.fill();
      c.closePath();
    },
    drawXx(c, x1, y1, x2, y2, color, lineWidth) {
      c.beginPath();
      c.setLineDash([5]);
      c.moveTo(x1, y1);
      c.lineTo(x2, y2);
      c.strokeStyle = color;
      c.lineWidth = lineWidth;
      c.stroke();
      c.closePath();
    },
    drawlx(c, data, color, lineWidth) {
      c.beginPath();
      c.setLineDash([]);
      c.moveTo(data[0].x, data[0].y);
      data.forEach((item) => {
        c.lineTo(item.x, item.y);
      });
      c.strokeStyle = color;
      c.lineWidth = lineWidth;
      c.stroke();
      c.closePath();
    },
    drawHx(c, startX, startY, endX, endY) {
      c.beginPath();
      c.moveTo(startX, startY);
      c.lineTo(endX, endY);
      c.lineWidth = 3;
      c.strokeStyle = "#5690F8";
      c.stroke();
    },
    drawZx(c, startX, startY, endX, endY) {
      c.beginPath();
      c.moveTo(startX, startY);
      c.lineTo(endX, endY);
      c.lineWidth = 3;
      c.strokeStyle = "#5690F8";
      c.stroke();
    },
    funLx(c,data,params) {
      let oneIndex = [];
      this.data.forEach((item, index) => {
        if (item.status == 2 || item.status == 3) {
          oneIndex.push(index);
        }
      });
      if(params=='new'){
        let oneArray = data.filter((element, index) => !oneIndex.includes(index));
        this.drawlx(c, oneArray, "#5690F8", "3");
      }else{
        let oneArray = data.filter((element, index) => oneIndex.includes(index));
        this.drawlx(c, oneArray, "#5690F8", "3");
      }
    },
  },
};
</script>

<style  lang="less">
body {
  background: #f1f1f1;
}
.main {
  // display: flex;
  position: relative;
  // padding-left: 40px;
  height: auto;
}
#canvas {
  position: absolute;
  z-index: 10;
  top: 81px;
  left: 10px;
}
</style>