canvas结合vue antd 实现折线图

程序员Linda

于 2023-03-24 10:28:37 发布

阅读量322

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45231437/article/details/129745742

版权

该代码示例展示了如何在Vue.js应用中结合使用canvas元素和A-Table组件来渲染数据。数据表格包含了多个列，如id、status、type和money等，并且对Name列使用了自定义渲染。同时，canvas用于动态绘制基于表格数据的图形，根据数据状态和类型进行区分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="main">
    <canvas id="canvas" width="60" :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: "1",
          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: 2,
        },
        {
          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: 2,
        },
        {
          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,
        }
      ],
    };
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart(){
      let canvas = document.querySelector("#canvas");
      canvas.height =( (this.data.length) * 54)-27;
      let c = canvas.getContext("2d");
      //组合折线数据位置
      let data = [];
      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 {
          obj.x = 54;
          obj.y = 5 + 54 * i;
          obj.z =  item.type == 1 ? 1 : 0;
        }
        data.push(obj);
      });
      //画虚线
      this.drawXx(c, 10, 5, 10,( (this.data.length) * 54)-54, "#5690F8", "1");
      //连线
      this.drawlx(c, data, "#5690F8", "3");
      //画点
      data.forEach((item) => {
        this.drawY(c, item.x, item.y, item.z == 1 ? "#5690F8" : "#ffffff");
      });
    },
    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();
    },
  },
};
</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>