根据中心点位/斜边长度/角度 生成随机裂缝坐标轴

已知裂缝中心点位 /裂缝长度/角度 生成裂缝位置形状坐标图

效果图

 

 

 

 

 

页面代码

<el-row v-show="showChart">
   <el-col :push="2" :span="20">
      <div id="axis"></div>
   </el-col>
</el-row>

 <el-button v-show="!showChart" @click="createAxis()">显示坐标轴</el-button>
 <el-button v-show="showChart && coordinateList.length>0" @click="createAxis()">重新生成坐标轴</el-button>
 <el-button v-show="showChart" @click="hideAxis()">隐藏坐标轴</el-button>

css代码

#axis {
    width: 1000px;
    height: 400px;
    background-color: aliceblue;
}

js代码

// 隐藏坐标轴
    hideAxis () {
      this.showChart = false
    },
    // 生成坐标轴
    createAxis (type) {
      // 构件面
      if (!this.dataForm.componentFace) {
        this.$message.error('请先选择构件面!')
        return
      }
      // 纵向位置
      if (!this.dataForm.longitudinalDirection || !this.dataForm.longitudinalDirectionDistance) {
        this.$message.error('请先填写纵向位置!')
        return
      }
      // 横向位置
      if (!this.dataForm.transverseDirection || !this.dataForm.transverseDirectionDistance) {
        this.$message.error('请先填写横向位置!')
        return
      }
      // 长度
      if (!this.dataForm.diseaseLength) {
        this.$message.error('请先填写长度!')
        return
      }
      // 角度
      if (!this.dataForm.diseaseAngle) {
        this.$message.error('请先填写角度!')
        return
      }
      // 构件面长度宽度信息为空
      if (!this.componentFaceWidth || !this.componentFaceLength) {
        this.$message.error('请先完善构件面长度/宽度信息!')
        return
      }
      // 计算邻边距离  
      let adjacentLength = this.calculateLength(this.dataForm.diseaseLength / 2, this.dataForm.diseaseAngle)[0]
      // 计算对边距离 
      let oppositeLength = this.calculateLength(this.dataForm.diseaseLength / 2, this.dataForm.diseaseAngle)[1]
      // 起始点
      let start = [this.dataForm.longitudinalDirectionDistance * 100 - adjacentLength, this.dataForm.transverseDirectionDistance * 100 - oppositeLength]
      // 中心点
      let centre = [this.dataForm.longitudinalDirectionDistance * 100, this.dataForm.transverseDirectionDistance * 100]
      // 截止点
      let end = [this.dataForm.longitudinalDirectionDistance * 100 + adjacentLength, this.dataForm.transverseDirectionDistance * 100 + oppositeLength]
      // div 宽高比
      const divW = 900
      let divH = 300
      // 构件面高度宽度-由接口获取 单位统一
      let componentFaceH = this.componentFaceWidth * 100
      let componentFaceW = this.componentFaceLength * 100
      // 计算div高度 因为表格文字占据100 需要加100
      divH = componentFaceH / componentFaceW * divW + 100
      let axis = document.getElementById('axis')
      axis.style.height = divH + 'px'
      let maxX = componentFaceW
      let maxY = componentFaceH
      let interval = 100
      let chartInfo = {
        yName: this.dataForm.transverseDirection + '(cm)',
        // yData: [start, centre, end],
        xName: this.dataForm.longitudinalDirection + this.dataForm.longitudinalType,
        maxX: maxX,
        maxY: maxY,
        interval: interval
      }
      // 使用接口保存点位
      if (type == 1) {
        chartInfo.yData = this.coordinateList
      } else { // 重新生成点位
        let fillRandom = this.createRandom(10, this.dataForm.diseaseLength / 2, start)
        let fillRandom2 = this.createRandom(10, this.dataForm.diseaseLength / 2, centre)
        chartInfo.yData = [start, ...fillRandom, centre, ...fillRandom2, end]
        // 记录点位保存至数据库
        this.coordinateList = chartInfo.yData
      }
      this.showChart = true
      this.doEchart(chartInfo)
    },
    // 计算距离
    calculateLength (diseaseLength, diseaseAngle) {
      // 邻边
      let adjacentLength = diseaseLength * Math.cos(2 * Math.PI / 360 * diseaseAngle)
      // 对边
      let oppositeLength = diseaseLength * Math.sin(2 * Math.PI / 360 * diseaseAngle)
      return [parseFloat(adjacentLength.toFixed(2)), parseFloat(oppositeLength.toFixed(2))]
    },
    // 随机数生成点位
    createRandom (start, end, point) {
      // 生成随机数 这个数值中间可以新增几个点
      let random = Math.round(Math.random() * ((end - start) / 5) + start)
      // 每段多长
      let diseaseLength = (end - start) / random
      // 遍历处理得到相应数量的正确点位 / 随机偏移量 处理进行偏移点位 
      let pointArr = []
      for (let i = 0; i < random; i++) {
        // 邻边
        let adjacentLength = this.calculateLength(diseaseLength, this.dataForm.diseaseAngle)[0]
        // 对边
        let oppositeLength = this.calculateLength(diseaseLength, this.dataForm.diseaseAngle)[1]
        // 得到正确点位
        point = [point[0] + adjacentLength, point[1] + oppositeLength]
        // pointArr.push(point)
        // 生成随机偏移
        let skewingLength = Math.round(Math.random() * oppositeLength)
        let skewingPoint = []
        if (Math.round(Math.random()) === 0) {
          skewingPoint = [point[0], point[1] - skewingLength]
        } else {
          skewingPoint = [point[0], point[1] + skewingLength]
        }
        pointArr.push(skewingPoint)
      }
      return pointArr
    },
    // 建立图形
    doEchart (chartInfo) {
      let myChart = echarts.init(document.getElementById('axis'));
      let option = {
        tooltip: {
          formatter: function (params) {
            let data = params.data || [0, 0];
            return data[0].toFixed(2) + ', ' + data[1].toFixed(2);
          }
        },
        grid: {
          left: 50,
          right: 50,
          bottom: 50,
          top: 50,
          containLabel: false,
        },
        xAxis: {
          type: 'value',
          interval: chartInfo.interval,
          min: 0,
          max: chartInfo.maxX,
          name: chartInfo.xName, //'3台',
          // nameLocation: 'start',
          // nameGap: 30,
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'],
            symbolOffset: [0, 12]
          }
        },
        yAxis: {
          type: 'value',
          name: chartInfo.yName, //'左侧(cm)',
          interval: chartInfo.interval,
          min: 0,
          max: chartInfo.maxY,
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'],
            symbolOffset: [0, 12]
          }
        },
        series: [
          {
            data: chartInfo.yData,
            type: 'line',
            smooth: true,   // 是否平滑曲线
            symbol: 'none', // 不显示点位
            color: '#409EFF', //柱条颜色
            label: {
              // show: true
            }
          }
        ]
      };
      myChart.setOption(option);
    }