canvas结合vue antd 实现折线图

时间:2022-12-13 21:58:31
<template>
<div class="main">
<canvas width="60" :height="cHeight"></canvas>
<a-table
ref="myTable"
:columns="columns"
:
: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>