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%"></custom-chart>
  </div>
</template>

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

const initialOption = {
  grid: {
    top: 25,
    right: 0,
    bottom: 40
  },
  title: {
    text: '',
    left: 'right',
    top: 0,
    textStyle: {
      color: '#ade6ee',
      fontSize: 12,
      rich: {
        a: {
          padding: [0, 27, 0, 0]
        },
        b: {
          color: '#ff5656'
        }
      }
    }
  },
  xAxis: {
    type: 'category',
    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,
    data: new Array(256).fill(0).map((_, index) => index)
  },
  yAxis: {
    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) => (Math.random() < 0.05 ? parseInt(Math.random() * 19644) : parseInt(Math.random() * 800)))
  }
}

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()
    }
  }
}
</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>