vue数字折线图

<template>
  <div class="trend">
    <div class="trend-box">
      <div class="trend-title">
        <div class="trend-title-item" v-for="(titles,indexT) in 10" :key="indexT">{{indexT}}</div>
      </div>
      <div class="trend-con">
        <div class="trend-row" v-for="(itemBg,indexBg) in 20" :key="indexBg">
          <div class="trend-item" v-for="(emBg,indexEmBg) in 10" :key="indexEmBg"></div>
        </div>
      </div>
      <div class="trend-con positions">
        <canvas
          :id="'canvas' + index"
          v-for="(item,index) in lineArray"
          :key="index"
          :width="item.width"
          height="30"
          :style="'left:'+ item.left + 'px'+ ';' +'top:' + item.top + 'px'"
          style="position:absolute;"
        ></canvas>
      </div>
      <div class="trend-con positions">
        <div class="trend-row borderNo" v-for="(item,index) in ballArrays" :key="index">
          <div
            class="trend-item borderNo pos"
            :style="'left:'+ em * 30 + 'px'+ ';' +'top:' + index * 30 + 'px'"
            v-for="(em,indexEm) in item"
            :key="indexEm"
          >
            <span class="reds">{{em}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ballArrays: [
        [0],
        [3],
        [3],
        [3],
        [9],
        [6],
        [3],
        [5],
        [8],
        [2],
        [0],
        [3],
        [3],
        [8],
        [9],
        [6],
        [3],
        [5],
        [8],
        [2]
      ],
      lineArray: []
    };
  },
  components: {},
  computed: {
    newArray() {}
  },
  mounted() {
    this.lineArray = [];
    for (let i = 0; i < this.ballArrays.length; i++) {
      if (i != 0) {
        let obj = {};
        obj.top = i * 30 - 15;
        if (this.ballArrays[i][0] <= this.ballArrays[i - 1][0]) {
          //判断画线方向
          obj.left = this.ballArrays[i][0] * 30 + 15;
          obj.y = 30;
          obj.twoY = 0;
        } else {
          obj.left = this.ballArrays[i - 1][0] * 30 + 15;
          obj.y = 0;
          obj.twoY = 30;
        }
        obj.width = Math.abs(
          (this.ballArrays[i][0] - this.ballArrays[i - 1][0]) * 30
        );
        if (obj.width == 0) {
          obj.width = 2;
        }
        this.lineArray.push(obj);
      }
    }
    console.log(this.lineArray);
    this.$nextTick(() => {
      this.lineArray.map((item, index) => {
        this.drawLine(index, item.width, item.y, item.twoY);
      });
    });
  },
  methods: {
    drawLine(index, w, y, twoY) {
      //index:canvas坐标,w:结束x坐标,y:开始y坐标,twoY:结束y坐标
      let c = document.getElementById("canvas" + index);
      let ctx = c.getContext("2d");
      ctx.beginPath();
      ctx.lineWidth = 2; //线条粗细
      ctx.lineCap = "butt"; //线条类型
      ctx.strokeStyle = "#df3753"; //线条颜色
      ctx.moveTo(0, y); //线条开始坐标
      ctx.lineTo(w, twoY); //线条结束坐标
      ctx.stroke();
    }
  }
};
</script>

<style scoped lang="less">
.trend {
  width: 300px;
  height: 630px;
  border: 1px solid #415273;
  border-radius: 6px;
  background: #293b5a;
  margin-left: 400px;
  margin-top: 100px;
  .trend-box {
    width: 100%;
    height: 100%;
    position: relative;
    .trend-title {
      height: 30px;
      width: 100%;
      display: flex;
      background: #1e2e49;
      .trend-title-item {
        width: 30px;
        height: 30px;
        line-height: 30px;
        box-sizing: border-box;
        border-left: 1px solid #415273;
        border-bottom: 1px solid #415273;
        text-align: center;
        color: #fff;
      }
    }
    .trend-con {
      width: 100%;
      height: 100%;
      overflow: hidden;
      .trend-row {
        display: flex;
        position: relative;
        .trend-item {
          width: 30px;
          height: 30px;
          line-height: 30px;
          box-sizing: border-box;
          border-left: 1px solid #415273;
          border-bottom: 1px solid #415273;
          text-align: center;
          span {
            display: inline-block;
            width: 18px;
            height: 18px;
            line-height: 18px;
            border-radius: 50%;
            font-size: 12px;
            color: #ffffff;
          }
          span.reds {
            background: #df3753;
          }
        }
        .trend-item:first-child {
          border-left: 0;
        }
        .trend-item.pos {
          position: absolute;
          z-index: 100;
          border: 0;
        }
      }
      .trend-row:last-child {
        .trend-item {
          border-bottom: 0;
        }
      }
    }
    .trend-con.positions {
      position: absolute;
      top: 30px;
      left: 0;
      width: 300px;
      z-index: 99;
    }
  }
}
.borderNo {
  border: 0;
}
</style>