渲染结果图

针状图

template

<template>
  <div class="needle-plot" :style="{ width: winW + 'px', height: winH + 'px' }">
    <canvas class="chart" id="canvas" ref="needleplot" :width="winW" :height="winH"
      style="border: 1px solid #eee;"></canvas>
    <div ref="mask" class="mask-box" v-show="show" :style="{ top: top, left: left }">
      <span>{{ xName }}：{{ maskValaue.v }}</span>
      <span>{{ yName }}：{{ maskValaue.v1 }}</span>
    </div>
  </div>
</template>

javascript

<script>
export default {
  props: {
    winW: {
      type: Number,
      default: 600
    },
    winH: {
      type: Number,
      default: 400
    },
    shrink: {
      type: Number,
      default: 50  //往里缩多少，相当于padding
    },
    xName: {
      type: String,
      default: "频率"
    },
    yName: {
      type: String,
      default: "深度"
    },
  },
  data() {
    return {
      top: "0px",
      left: "0px",
      maskValaue: {},
      show: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 生成data
    createData(num) {
      let xData = [];
      for (let i = 0; i < num; i++) {
        let v = Math.floor(Math.random() * (100 - 0)) + 0;
        v = this.numHandle(v)
        let v1 = Math.random() * (10 - 0);
        v1 = this.numHandle(v1)
        xData.push([v1, v])
      }
      return xData;
    },
    // 数字字符串转数字
    numHandle(str, reserve) {
      return Number(str.toFixed(reserve ? reserve : 0))
    },
    init() {
      const c = this.$refs.needleplot;
      var ctx = c.getContext("2d");
      const shrink = this.shrink;
      const c_vh = this.winH;
      const c_vw = this.winW;

      const canvas = document.getElementById("canvas");
      canvas.onmousemove = onMouseMove;

      // 生成数据
      const xData = this.createData(20)


      // y轴刻度间隔
      let y_d = [];
      let f_d = JSON.parse(JSON.stringify(xData));
      f_d.sort((a, b) => {
        return a[1] - b[1]
      })
      const y_max = f_d[f_d.length - 1][1];
      const y_min = f_d[0][1];
      const y_len = xData.length < 5 ? xData.length - 1 : 5;
      let y_diff = this.numHandle(((c_vh - shrink * 2) / y_len));
      y_diff = y_diff < 8 ? 8 : y_diff;
      y_d = [];
      for (let i = 0; i <= y_len; i++) {
        y_d.push(this.numHandle(i * ((y_max - y_min) / y_len)))
      }


      // 绘制y轴线
      ctx.moveTo(shrink, shrink);
      ctx.lineTo(shrink, c_vh - shrink);
      ctx.stroke();

      // y轴刻度
      for (let i = 0; i < y_d.length; i++) {
        let v = y_d[i]
        ctx.font = "13px Arial";
        let y = ((y_d.length - 1) - i) * y_diff + shrink;
        ctx.moveTo(shrink, y);
        ctx.lineTo(shrink + 5, y);
        ctx.fillText(v, shrink / 3, y);
      }
      ctx.stroke();


      // x轴
      let x_f_d = JSON.parse(JSON.stringify(xData));
      x_f_d.sort((a, b) => {
        return a[0] - b[0]
      })
      const x_max = x_f_d[x_f_d.length - 1][0]
      const x_min = x_f_d[0][0];
      const x_len = xData.length < 5 ? xData.length - 1 : 5;
      let x_diff = this.numHandle(((c_vw - shrink * 2) / x_len));
      let x_d = [];
      for (let i = 0; i <= x_len; i++) {
        x_d.push(this.numHandle(i * ((x_max - x_min) / x_len)))
      }

      // // 绘制x轴线
      ctx.moveTo(shrink, c_vh - shrink);
      ctx.lineTo(c_vw - shrink, c_vh - shrink);
      ctx.stroke();
      for (let i = 0; i < x_d.length; i++) {
        let v = x_d[i];
        ctx.font = "13px Arial";
        let x = i * x_diff + shrink;
        ctx.moveTo(x, c_vh - shrink);
        ctx.lineTo(x, c_vh - shrink - 5);
        ctx.stroke();
        ctx.fillText(v, x, c_vh - shrink / 2);
      }

      const circles = []


      for (let k = 0; k < xData.length; k++) {
        let x = x_diff / x_d[1] * xData[k][0] + shrink;
        let y = y_diff / y_d[1] * (y_max - xData[k][1]) + shrink;
        ctx.beginPath();
        circles.push({ x, y, v: xData[k][0], v1: xData[k][1] })
        ctx.arc(x, y, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.moveTo(x, y);
        ctx.lineTo(x, c_vh - shrink)
        ctx.stroke();
      }

      const _this = this;
      function onMouseMove(e) {
        let clickX = e.pageX - canvas.offsetLeft;
        let clickY = e.pageY - canvas.offsetTop;
        let flag = false;
        let circle = null;
        for (let i = circles.length - 1; i >= 0; i--) {
          circle = circles[i];
          let s = clickX > (circle.x - 3) && clickX < (circle.x + 3) && clickY > (circle.y - 3) && clickY < (circle.y + 3);
          if (s) {
            circle = circles[i];
            flag = true;
            break;
          }
        }

        if (flag) {
          _this.maskValaue = circle;
          let mask = _this.$refs.mask;
          _this.show = true;
          _this.$nextTick(() => {
            _this.top = e.pageY - mask.offsetHeight - 10 + 'px';
            _this.left = e.pageX - mask.offsetWidth / 2 + 'px';
          })
        } else {
          _this.show = false;
        }
      }
    }
  }
}
</script>

style

<style>
body {
  background-color: #fff !important;
}
</style>
<style lang="scss" scoped>
.needle-plot {
  width: 600px;
  height: 400px;
  margin: 50px auto;

  .mask-box {
    padding: 2px 3px;
    border-radius: 4px;
    background-color: #eee;
    position: absolute;
    user-select: none;

    span {
      display: block;
      margin: 5px;
    }
  }
}
</style>

留言：上线了极简导航网站，想让它更好玩好用一些，望各位大佬给提提意见
地址：www.cuczz.com

1624457567(1).jpg