AnalysisSystemForRadionuclide_vue/src/views/spectrumAnalysis/components/SpectrumLineChart.vue

<template>
  <div class="spectrum-line-chart">
    <div class="title">{{ title + ' Count' }}</div>
    <custom-chart
      class="spectrum-line-chart-main"
      ref="chartRef"
      :option="option"
      style="height: 100%"
      @zr:mousemove="handleMouseMove"
    ></custom-chart>
  </div>
</template>

<script>
import CustomChart from '@/components/CustomChart/index.vue'
import { cloneDeep } from 'lodash'
import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper.js'

const initialOption = {
  grid: {
    top: 25,
    right: 12,
    bottom: 40
  },
  title: {
    text: '',
    left: 'right',
    top: 0,
    textStyle: {
      color: '#ade6ee',
      fontSize: 12,
      rich: {
        a: {
          padding: [0, 27, 0, 0]
        },
        b: {
          color: '#ff5656'
        }
      }
    }
  },
  xAxis: {
    min: 0,
    max: 256,
    interval: 64,
    axisLine: {
      lineStyle: {
        color: 'rgb(119, 181, 213, 0.5)'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(119, 181, 213, .2)'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#ade6ee'
    },
    name: '',
    nameLocation: 'center',
    nameTextStyle: {
      fontSize: 14,
      color: '#5b9cba'
    },
    nameGap: 25
  },
  yAxis: {
    min: 0,
    max: 21099,
    interval: 21000 / 4,
    axisLine: {
      show: true,
      lineStyle: {
        color: 'rgb(119, 181, 213, 0.5)'
      }
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(119, 181, 213, .2)'
      }
    },
    axisLabel: {
      color: '#ade6ee'
    }
  },
  series: {
    type: 'line',
    itemStyle: {
      color: ''
    },
    symbol: 'none',
    data: new Array(256)
      .fill(0)
      .map((_, index) => [
        index,
        Math.random() < 0.05 ? parseInt(Math.random() * 19644) : parseInt(Math.random() * 800)
      ]),
    markLine: {
      symbol: 'none',
      animation: false,
      label: {
        show: false
      },
      lineStyle: {
        type: 'solid',
        color: 'yellow'
      },
      silent: true,
      data: []
    }
  }
}

export default {
  components: {
    CustomChart
  },
  props: {
    color: {
      type: String,
      default: 'red'
    },
    title: {
      type: String,
      default: 'Gamma'
    }
  },
  data() {
    const option = cloneDeep(initialOption)
    option.title.text = `{a|Channel: 136}{a|Count: 1475}{b|Energy:  381.409}`
    option.series.itemStyle.color = this.color
    option.xAxis.name = this.title + ' Channel'
    return {
      option
    }
  },
  methods: {
    resize() {
      this.$refs.chartRef && this.$refs.chartRef.resize()
    },

    // 设置辅助线位置
    setLinePosition(xAxis) {
      setTimeout(() => {
        if (xAxis) {
          this.option.series.markLine.data = [{ xAxis }]
        } else {
          this.option.series.markLine.data = []
        }
      }, 0)
    },

    handleMouseMove(param) {
      const { offsetX, offsetY } = param
      const point = getXAxisAndYAxisByPosition(this.$refs.chartRef.getChartInstance(), offsetX, offsetY)
      this.setLinePosition(point ? point[0].toFixed() : null)
    }
  }
}
</script>

<style lang="less" scoped>
.spectrum-line-chart {
  display: flex;
  height: 100%;

  .title {
    writing-mode: vertical-rl;
    color: #5b9cba;
    font-size: 16px;
    transform: rotate(180deg);
    text-align: center;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &-main {
    flex: 1;
  }
}
</style>